vuejs 2.x 压缩图片上存插件localResizeIMG

1.安装依赖

    npm i lrz -S

2 对应模块中引入：

 import lrz from 'lrz'  

3 使用函数： 返回结果是一个promise对象。

      lrz( file, {
          width : 300
          //quality: 0.8    //自定义使用压缩方式
      })  
        .then(function(rst) {
            //成功时执行
        }).catch(function(error) {
            //失败时执行
        }).always(function() {
            //不管成功或失败，都会执行
        })

 let formData = new FormData(); //要http传输的对象
      //压缩图片
      lrz(e.target.files[0] ,{ //e.target.files[0] 图片文件
        width: 1920,
        height: 1080
      }).then(res=>{
        let base64 = this.dataURLtoFile(res.base64, e.target.files[0].name);
        formData.append('file', base64);//base64 是图片解码后的文件
      }).catch(error=>{
        formData.append("file", e.target.files[0]);
      })

      let url = this.$store.state.ajaxUrl + "/rfid-stocktake/fast/upload/v1";
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      this.$http.post(url, formData, config).then(res=>{})

解码压缩后图片方法：

dataURLtoFile(dataurl, filename) { // 将base64转换为file文件
      // 参数dataurl base64字符串
      // 参数filename	图片名称
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, {
        type: mime
      })
    }

*函数说明：
1、file：得到的图片文件，或者直接传入图片路径。
2、[ options ]： 这个参数可以省略，有如下图几个属性

  属性             值类型                        属性说明
  width          number      图片最大的宽度。默认为原图的宽度
 height          number      图片最大的高度，默认为原图的高度
 quality          number     图片压缩质量，取值0-1，默认为0.7

filedName string 后端接收的字段名，默认为 ‘file’

扩展—调取相册，不限制图片格式，加上属性capture=“camera” 调取相机

<input type=“file” accept=“image/*” @change-“compressImg” />

图片压缩前后大小对比：