微信小程序使用官方 weui Uploader压缩上传图片

weui Uploader文档
参考 https://www.jianshu.com/p/1b8a1e96a6d5

wxml

<view class="whiteblock main">
  <mp-uploader 
    ext-class="my-uploader"
    bindfail="uploadError" 
    bindsuccess="uploadSuccess" 
    select="{{selectFile}}" 
    upload="{{uplaodFile}}" 
    files="{{files}}" 
    binddelete="handleDelete"
    delete
    max-count="{{maxCount}}" 
    title="上传凭证" 
    tips="最多{{maxCount}}张">
  </mp-uploader>
  <canvas canvas-id='attendCanvasId' class='temp-canvas' style="width:{{cWidth}}px;height:{{cHeight}}px;position: absolute;left:-1000px;top:-1000px;"></canvas>
</view>

js

  data:{
    files: [], // 初始展示图片
    maxCount: 6,//最多上传张数
    pics: [],// 上传到服务器的图片
    promisePics: [], // 上传图片队列
    // canvas压缩图片宽高
    cWidth: 0,
    cHeight: 0,
  },
  // 选择图片
  selectFile(files) {
    console.log('files', files)
    // 返回false可以阻止某次文件上传
    // const {tempFiles} = files
    // if(tempFiles && tempFiles.length>0){
    //   for(let i=0;i<tempFiles.length;i++){
    //     if(tempFiles[i].size >= 3000000){
    //       wx.showToast({
    //         title: '上传图片不得超过3MB',
    //         icon: 'none'
    //       })
    //       return false
    //     }
    //   }
    // }
  },
  // 上传图片方法
  handleUpload(img){
    return new Promise((resolve, reject) => {
      const that = this
      wx.uploadFile({
        url: config.REQUEST_BASE_URL + uri.ToolsUploadImages, //上传图片接口
        filePath: img,
        name: 'file',
        success (res){
          // console.log(res)
          if(res.errMsg == 'uploadFile:ok'){//上传成功
            const data = wx.$common.toJSON(res.data)
            if(data){
              if(data.data && data.data.length>0){
                let {pics, promisePics} = that.data
                // console.log(pics)
                pics.push(data.data[0])
                promisePics.push(img)
                that.setData({
                  pics,
                  promisePics
                })
                // resolve(img)
                resolve()
              }else{
                reject(data.message)
              }
              
            }else{
              reject(data)
            }
            
          }
        }
      })
    })
  },
  // canvas压缩图片
  getCanvasImg(imgInfo){
    const _this = this
    return new Promise((resolve, reject) => {
      let ratio = 2;//压缩倍数
      let {path, width, height} = imgInfo;
      let cWidth = width, cHeight = height
      while(cWidth > 800){
        cWidth = Math.trunc(width / ratio)
        cHeight = Math.trunc(height / ratio)
        ratio++
      }
      this.setData({
        cWidth,
        cHeight
      })

      // 开始绘制
      const ctx = wx.createCanvasContext('attendCanvasId');
      ctx.drawImage(path, 0, 0, cWidth, cHeight);
      ctx.draw(false, function(){
        wx.canvasToTempFilePath({
          canvasId: 'attendCanvasId',
          destWidth: cWidth,//输出的图片的宽度
          destHeight: cHeight,//输出的图片的高度
          fileType: 'jpg',//目标文件的类型
          quality: 0.8,//图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
          success(res) {
            console.log(res.tempFilePath)//最终图片路径
            _this.handleUpload(res.tempFilePath).then(_ => {
              resolve()
            })
          },
          fail(res) {
            console.log(res.errMsg)
            reject(res)
          }
        })
      }) 
    })
  },
  // 返回图片上传promise
  imgPromise(item){
    const _this = this
    return new Promise((resolve, reject) => {
      wx.getImageInfo({
        src: item,
        success(res){
          // console.log('ImageInfo', res)
          _this.getCanvasImg(res).then(pImg => {
            // console.log(pImg)
            resolve(pImg)
          }).catch(err => {
            reject(err)
          })
          
        }
      })
    })
  },
  uplaodFile(files) {
    // console.log('upload files', files)
    const {tempFilePaths} = files
    let promise = Promise.resolve()
    tempFilePaths.map(item => {
      // 异步队列
      promise = promise.then(() => {
        return this.imgPromise(item)
      })
      
    })
    // 图片上传的函数，返回Promise，Promise的callback里面必须resolve({urls})表示成功，否则表示失败
    return new Promise((resolve, reject) => {
      promise.then(_ => {
        // console.log(this.data.promisePics)
        resolve({
          urls: this.data.promisePics
        })
        // 清空上传图片队列
        this.setData({
          promisePics: []
        })
      })
    })
  },
  // 删除图片
  handleDelete(e){
    // console.log(e)
    const {index, item} = e.detail
    let {pics} = this.data
    pics.splice(index, 1)
    this.setData({
      pics
    })
  },
  uploadError(e) {
    console.log('upload error', e.detail)
  },
  uploadSuccess(e) {
    console.log('upload success', e.detail)
  },