vue vant 上传图片之压缩图片 vue中上传图片

 <van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="1" />

  afterRead(file){
             if(this.fileList.length > 1){
                 this.fileList.splice(1);
                 this.$msg({
                     text:'只能选择这么多!',
                     type:'info'
                 })
                 return false;
             }
            
            let maxSize = 1 * 1024 * 1024;  //自己定义的文件大小，超过多少M就开始压缩(现在是1M)
            let fileObj = file.file;  // 当前的图片
             if (fileObj.size > maxSize) {
                this.imgcompress(fileObj, file);
            }else{
                 let Files = this.Files;
                 Files.push(file.file);
            } 
        },
       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);
            that.Files.push(blob); //压缩之后的图片
          },
          "image/png",
          quality
        );
      });
      // 创建画布
    },