小程序van-uploader 上传图片并压缩图片

          <view class="upload">
            <van-uploader file-list="{{ business_license_file }}" bind:after-read="afterRead" deletable="{{ true }}" data-id="business_license" preview-image="{{true}}" bind:delete="delete_img" />

            <canvas canvas-id="canvas" style="width:{{cw}}px;height:{{ch}}px;position: absolute;left:-2000px;top:-2000px;"></canvas>
          </view>

  //图片压缩
  uploadCompressImg(file_url) {
    let that = this
    return new Promise(function(resolve, reject){
    // 获得原始图片大小
    wx.getImageInfo({
      src: file_url,
      success(res) {
        let originHeight = res.height;
        let originWidth = res.width;
        // 压缩比例
        // 最大尺寸限制
        let maxWidth = 1024,
          maxHeight = 1024;
        // 目标尺寸
        let targetWidth = originWidth,
          targetHeight = originHeight;
        // 等比例压缩，如果宽度大于高度，则宽度优先，否则高度优先
        if (originWidth > maxWidth || originHeight > maxHeight) {
          if (originWidth / originHeight > maxWidth / maxHeight) {
            // 要求宽度*(原生图片比例)=新图片尺寸
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
          } else {
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
          }
        }
 
        // 更新 canvas 大小
        that.setData({
          "cw": targetWidth,
          "ch": targetHeight
        });
        // 尝试压缩文件，创建 canvas
        let ctx = wx.createCanvasContext('canvas');
 
        ctx.clearRect(0, 0, targetWidth, targetHeight);
 
        //通过得到图片旋转的角度来调整显示方向以正确显示图片，主要解决 ios 系统上的图片会有旋转的问题
        let orientation = res.orientation;
        if (orientation == 'right') { //exif的6
          that.setData({
            "cw": targetHeight,
            "ch": targetWidth
          });
          ctx.rotate(90 * Math.PI / 180);
          ctx.drawImage(file_url, 0, 0, targetWidth, targetHeight, 0, -targetHeight, that.data.ch, that.data.cw);
        } else {
          ctx.drawImage(file_url, 0, 0, targetWidth, targetHeight);
        }
 
        ctx.draw(false, function () {
          // 获得新图片输出
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            canvasId: 'canvas',
            destWidth: targetWidth,
            destHeight: targetHeight,
            quality: 0.9,
            fileType: "jpg",
            success: (res) => {
              console.log(res)
              resolve(res.tempFilePath);
             
            },
            fail: (err) => {
              console.error(err)
            }
          }, this)
        })
 
      }
    })
  })

  },
  //图片上传
  afterRead(e) {
    // console.log(1)
    var that = this
    const {
      file
    } = e.detail;
    console.log(file)
    var fileArr = []
     that.uploadCompressImg(file.url).then(res=>{
      console.log(res)
      fileArr.push({
        url:res
        // url: file.url
      })
      // console.log(fileArr)
      if (e.currentTarget.dataset.id == "join_qualification") {
        that.setData({
          join_qualification_filelist: fileArr
        })
      } else if (e.currentTarget.dataset.id == "business_license") {
        that.setData({
          business_license_file: fileArr
        })
      }
      let base64_photo = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(file.url, "base64")
      // console.log(base64_photo)
      var arr = []
      arr.push({
        content: base64_photo,
        imagename: api.getImgFilename(file.url).split(".")[0],
        imagetype: file.type,
        imagesize: file.size
      })
  
      if (e.currentTarget.dataset.id == "join_qualification") {
        that.setData({
          join_qualification: JSON.stringify(arr)
        })
  
      } else if (e.currentTarget.dataset.id == "business_license") {
        //business_license
      
        that.setData({
          business_license: JSON.stringify(arr)
        })
      }
     })
   
   

  },