6.关于小程序单图多图上传以及压缩

小程序图片上传：上传图片 wx.uploadFile()文档地址
小程序压缩图片可以使用小程序自己的压缩，但是好像只能压缩JPG文件（可以通过限制文件后缀来进行压缩），网上大多都是canvas压缩，这里也是canvas压缩。小程序用户发布信息上传文件需要过一遍安全接口，一般在选择完图片去检验

1.单图上传带压缩

//选择图片 个人最近做的图片上传
 choiceImage() {
   let that = this;
   wx.chooseImage({
     count: 1, //最多上传选择几张图片
     sizeType: ['compressed'], //设置选择图片原图还是压缩图 original 原图，compressed 压缩图，默认二者都有
     sourceType: ['album', 'camera'], //选择图片方式 album 从相册选图，camera 使用相机，默认二者都有
     async success(res) {
       console.log(res);
       var list = res.tempFiles;
       // 5242880 为五兆(如果图片太大可以后续压缩,或者提示用户图片太大了)
       // if (list[0].size > 5242880) {
       //   wx.showToast({
       //     title: `图片大小不能大于5兆,请重新上传~`,
       //     icon: 'none'
       //   })
       //   return false
       // }
     
       if (list[0].size > 5242880) {
         // 压缩图片通过canvas 下面为画布
          // <canvas canvas-id="canvas" style="width:{{cWidth}}px;height:{{cHeight}}px;position: absolute;left:-1000px;top:-1000px;"></canvas>
         let path = await that.compressImg(list[0].path)
         let data = {
           formData: {
             flag:726
           },
           filePath: path,
           name: 'file'
         }
         console.log(data)
         that.uploadImg(data);
       }else{

       }
      
     }
   })
 },
 //通过canvans缩放长宽来压缩图片 path:图片本地路径  limitNum：压缩到长宽多大
 async compressImg(path, multiple = 2, limitNum = 100) {
   let that = this;
   return new Promise((resolve, reject) => {
     wx.getImageInfo({
       src: path,
       success(res) {
         var canvasWidth = res.width //图片原始长宽
         var canvasHeight = res.height
         console.log('图片的基本信息', res)
         // while循环 保证宽高在100以内 Math.trunc()去掉小数点右边数
         while (canvasWidth > limitNum || canvasHeight > limitNum) { 
           canvasWidth = Math.trunc(res.width / multiple)
           canvasHeight = Math.trunc(res.height / multiple)
           multiple++
         }
         //设置画布长宽
         that.setData({
           cWidth: canvasWidth,
           cHeight: canvasHeight
         })
         var ctx = wx.createCanvasContext('canvas')
         ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
         ctx.draw(false, setTimeout(() => {
           wx.canvasToTempFilePath({
             canvasId: 'canvas',
             destWidth: canvasWidth,
             destHeight: canvasHeight,
             success: function (res) {
               console.log(res.tempFilePath) //图片路径
               resolve(res.tempFilePath)
             },
             fail: function (res) {
               console.log(res.errMsg)
             }
           })
         }, 100))
       },
       fail: function (res) {
         console.log(res.errMsg)
       },
     })
   })
 },
 //单图上传方法
 async uploadImg(val) {
   console.log(val,'传入值')
   return new Promise((resolve, reject)=>{
     wx.uploadFile({
       url: 'www.baidu.com', // 开发者服务器地址
       filePath: val.filePath, //要上传文件资源的路径 (本地路径)
       name: val.name, //文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容	
       header: {
         'content-type': 'multipart/form-data',
         'token': wx.getStorageSync('token')
       },
       formData: {
         //上传时候传入的参数 HTTP 请求中其他额外的 form data
         flag: val.flag
       },
       timeout: 20000, //超时时间，单位为毫秒 
       //成功回调
       success(res) {
         console.log(res)
         resolve(1)
       },
       //失败回调
       fail(err) {
         console.log(err)
         reject(1)
       },
       //结束回调
       complete: function () {}
     });
   })
 },

1.多图上传（递归上传）

  //上传图片
  choiceImages() {
    let that = this;
    wx.chooseImage({
      count: 9,
      sourceType: ['album', 'camera'],
      sizeType: ['compressed'],
      async success(res) {
        console.log(res);
        let list = res.tempFiles;
        console.log(list);
        let allList = [];
        for (let i = 0; i < list.length; i++) {
          //两M
          if (list[i].size > 2097152) {
            var path = await that.compressImg(list[i].path)
            var data = {
              formData: {
                flag: 726
              },
              filePath: path,
              name: 'file'
            }
            allList.push(data);
          } else {
            var data = {
              formData: {
                flag: 722
              },
              filePath: list[i].path,
              name: 'file'
            }
            allList.push(data);
          }
        }
        console.log(allList)
        let successUp = 0;
        let failUp = 0;
        let count = 0
        // 多图上传 allList:图片数组 successUp：上传成功次数 现在上传的下标
        that.uploadImgs(allList, successUp, failUp, count);
      },
      fail(err) {}
    })
  },
  //通过canvans缩放长宽来压缩图片 path:图片本地路径  limitNum：压缩到长宽多大
  async compressImg(path, multiple = 2, limitNum = 100) {
    console.log(path)
    let that = this;
    return new Promise((resolve, reject) => {
      wx.getImageInfo({
        src: path,
        success(res) {
          var canvasWidth = res.width //图片原始长宽
          var canvasHeight = res.height
          console.log('图片的基本信息', res)
          // while循环 保证宽高在100以内 Math.trunc()去掉小数点右边数
          while (canvasWidth > limitNum || canvasHeight > limitNum) {
            canvasWidth = Math.trunc(res.width / multiple)
            canvasHeight = Math.trunc(res.height / multiple)
            multiple++
          }
          //设置画布长宽
          that.setData({
            cWidth: canvasWidth,
            cHeight: canvasHeight
          })
          //----------绘制图形并取出图片路径--------------
          var ctx = wx.createCanvasContext('canvas')
          ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
          ctx.draw(false, setTimeout(() => {
            wx.canvasToTempFilePath({
              canvasId: 'canvas',
              destWidth: canvasWidth,
              destHeight: canvasHeight,
              success: function (res) {
                console.log(res.tempFilePath) //图片路径
                resolve(res.tempFilePath)
              },
              fail: function (res) {
                console.log(res.errMsg)
              }
            })
          }, 100))
        },
        fail: function (res) {
          console.log(res.errMsg)
        },
      })
    })
  },
  //多张图片上传
  uploadImgs: function (allList, successUp, failUp, count) {
    console.log(allList, successUp, failUp, count)
    let that = this;
    let length = allList.length; //总共上传的数量
    let releaseImageList = that.data.releaseImageList;
    wx.uploadFile({
      url: 'www.baidu.com',
      filePath: allList[count].filePath,
      name: allList[count].name,
      header: {
        'content-type': 'multipart/form-data',
        'token': wx.getStorageSync('token')
      },
      formData: {
        flag: allList[count].formData.flag,
      },
      timeout: 20000,
      success(res) {
        console.log(res)
        var data = JSON.parse(res.data)
        if (res.statusCode === 200) {
          console.log(res)
          successUp++;
          releaseImageList.push(data.data)
          that.setData({
            releaseImageList,
          })
        }
      },
      fail(res) {
        failUp++; //失败+1
      },
      complete: function (res) {
        console.log('递归', allList, successUp, failUp, count)
        count++; //下一张
        if (count == length) {
          // that.setData({
          //   showModalStatus: false,
          // })
          console.log('全部图片上传完了')
        } else {
          //递归调用，上传下一张
          that.uploadImgs(allList, successUp, failUp, count);
        }
      }
    });
  },

因为小程序图片按比例截取有点多，所以放下篇博客了
链接地址：微信小程序做按比例截取图片
希望能帮到大家，也便于自己记录（如果有帮助到大家可以点下赞哦~）！！！
如有疑问或者不对的地方可以下方评论留言讨论哦~会积极回复大家的！！！