vue + vant upload 实现图片压缩上传

项目场景：

vue + vant 在进行手机端项目进行upload—图片上传的时候，由于当前手机内部图片过大，导致上传缓慢而进行的图片

vant-Uploader 文件上传：

提示：after-read: 文件读取完成后的回调函数

<van-uploader
      :max-count="1"
      v-model="fileList"
      :after-read="afterRead"
      :before-delete="deleteFunc"
    >
      <van-image width="117" height="77" :src="require('@/assets/img/'+ imgUrl)" />
 </van-uploader>

---

具体代码：

提示：这里填写问题的分析：
例如：Handler 发送消息有两种方式，分别是 Handler.obtainMessage()和 Handler.sendMessage()，其中 obtainMessage 方式当数据量过大时，由于 MessageQuene 大小也有限，所以当 message 处理不及时时，会造成先传的数据被覆盖，进而导致数据丢失。

 afterRead(file) {
      // 此时可以自行将文件上传至服务器
      file.status = "uploading";
      file.message = "上传中...";
      let maxSize = 2 * 1024 * 1024;  //自己定义的文件大小，超过多少M就开始压缩(现在是2M)
      let fileObj = file.file;  // 当前的图片
      if (fileObj.size > maxSize) {
        this.imgcompress(fileObj, file);
      } else {
        const formData = new FormData();
        formData.append("file", file.file);  //此处的文件上传是formData格式
        let that = this;
        that
          .$axios({
            method: "post",
            url:"图片上传的路径，可以取vant默认的图片地址",
            headers: {
              "Content-Type": "multipart/form-data"
            },
            data: formData
          })
          .then(res => {
        	  file.status = "";
              file.message = "";
           
          })
          .catch(() => {
            file.status = "failed";
            file.message = "上传失败";
          });
      }
    },
	imgcompress(file, files) {
       const img = document.createElement('img')
      const reader = new FileReader(); // 读取文件资源实例
      reader.readAsDataURL(file);   //读取图片资源
      reader.onload = e => {		//读取成功
        img.src = e.target.result;
        const { width: originWidth, height: originHeight } = img; //上传的图片的宽高
        const maxWidth = 1000, //设置一个canvas 的最大宽高
          maxHight = 1000;
        if (originWidth > maxWidth || originHeight > maxHight) {
          //计算出图片的缩放比例
          if (originWidth > originHeight) {
            //宽 大于 高
            const Proportion = Math.ceil(originWidth / maxWidth);
            let targetWidht = parseInt(originWidth / Proportion); //目标的宽度
            let targetHeight = parseInt(originHeight / Proportion); //目标的高度

            this.createCanvasCompress(targetWidht, targetHeight, img, files);
          } else {
            const Proportion = Math.ceil(originHeight / maxHight); //高大于宽
            let targetWidht = parseInt(originWidth / Proportion); //目标的宽度
            let targetHeight = parseInt(originHeight / Proportion); //目标的高度
            let bold = this.createCanvasCompress(
              targetWidht,
              targetHeight,
              img,
              files
            );
          }
        } else {
          let quality = 0.8;
          this.createCanvasCompress(
            originWidth,
            originHeight,
            img,
            files,
            quality
          );
        }
      };
    },
    createCanvasCompress(targetWidth, targetHeight, img, files, quality) {
      let that = this;
      return new Promise((resolve, reject) => {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        // 设置宽高度为等同于要压缩图片的尺寸
        canvas.width = targetWidth;
        canvas.height = targetHeight;
        context.clearRect(0, 0, targetWidth, targetHeight);
        //将img绘制到画布上
        console.log(targetWidth, targetHeight);
        context.drawImage(img, 0, 0, targetWidth, targetHeight);

        let bold = canvas.toBlob(
          function(blob) {
            resolve(blob);
            const formData = new FormData();
            formData.append("file", blob, "xxx.jpg");

            that
              .$axios({
                method: "post",
                url:'url',
                headers: {
                  "Content-Type": "multipart/form-data"
                },
                data: formData
              })
              .then(res => {
                if (res.data.responseCode == 200) {
                  files.status = "";
                  files.message = "";
                
                }
              })
              .catch(() => {
                files.status = "failed";
                files.message = "上传失败";
              });
          },
          "image/png",
          quality
        );
      });
      // 创建画布
    },