简单前端图片压缩上传----同步表单数据上传（formData、localResizeIMG）

首先，图片压缩用的插件：https://github.com/think2011/localResizeIMG

虽然这个项目已不再维护了，但是普通需求还是很稳定满足的。

在页面里引用js文件：

<script src="./dist/lrz.bundle.js"></script>

页面HTML，form表单：

<form id="addForm" method="" class="" action="">
    <input class="" id="name" name="name" type="text" placeholder=""/>
    <input class="" id="age" name="age" type="text" placeholder=""/>
    <input class="" id="sex" name="sex" type="text" placeholder=""/>
    <input id="file" name="file" accept="image/*" type="file"/> <!--accept="image/*" 表示只接收图片文件 -->
    <button id="btn_save" type="button" class="btn btn-success">
        保存
    </button>
</form>

js：

//提交表单
$("#btn_save").click(function () {
      // 是否验证成功
      lrz($('#file')[0].files[0], //通过id获取file
           {width:400} //压缩配置，具体还有哪些参数下文解释
          ).then(function (rst) {
           // 压缩处理成功会执行
          console.log(rst);
          var form = new FormData(document.getElementById("addForm"));//包装form为FormData对象，相当于form表单提交数据
          form.set('file', rst.file);//重要！用压缩的图片file对象替换表单file原始对象
          $.ajax({  //ajax上传
               url: "/saveInfo",
               type: "POST",
               data: form,
               processData: false,//processData为false为不序列化form对象
               contentType: false,
               success: function (data) {
                  alert("保存成功！");
               },
               error: function (e) {
                  alert("错误！！");
               }

            })
         })
         .catch(function (err) {
            // 处理失败会执行
         })
         .always(function () {
            // 不管是成功失败，都会执行
         });
})

 

压缩图片：lrz(file, [options]);

　　file 通过 input:file 得到的文件，或者直接传入图片路径

　　[options] 这个参数允许忽略

　　width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设定时会适应宽度

　　height {Number} 图片的最大高度，默认为原图高度

　　quality {Number} 图片压缩质量，取值 0 - 1，默认为 0.7

　　fieldName {String} 后端接收的字段名，默认：file

返回结果：promise 对象

　　       then(rst) 处理成功后执行

　　　　rst.formData 后端可处理的数据

　　　　rst.file 压缩后的file对象，如果压缩率太低，将会是原始file对象

　　　　rst.fileLen 生成后的图片的大小，后端可以通过此值来校验是否传输完整

　　　　rst.base64 生成后的图片base64，后端可以处理此字符串为图片，也可以直接用于 img.src = base64

　　　　rst.base64Len 生成后的base64的大小，后端可以通过此值来校验是否传输完整

　　　　rst.origin 也就是原始的file对象，里面存放了一些原始文件的信息，例如大小、日期等

 

这样压缩的file文件就可以同表单数据一起同步上传到后端进行处理了（效果就相当于form的action提交）。

后端的话，我是java，springMVC，springBoot的后台。

@PostMapping("/saveCadreInfo")
public ResponseEntity<?> addCadreInfo(HttpServletRequest request) throws IOException{

    MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request;//request强制转换注意
    MultipartFile file = mRequest.getFile("file");//获取压缩的image
   //我表单其他字段很多所以用的getParameterMap（），字段少你也可以request.getParameter("")
    Map map = request.getParameterMap();
    return ResponseEntity.ok(null);
}

~不喜欢篮球的摄影师不是一个好程序员~