微信小程序之批量上傳并壓縮圖片的實(shí)例代碼

<canvas canvas-id='attendCanvasId' class='myCanvas'></canvas>

// 點(diǎn)擊加_壓縮
 takePhoto: function () {
  var that = this;
  let imgViewList = that.data.imgViewList; //這個(gè)是用來承載頁面循環(huán)展示圖片的
   //拍照、從相冊(cè)選擇上傳
   wx.chooseImage({
    count: 4,  //這個(gè)是上傳的最大數(shù)量，默認(rèn)為9
    sizeType: ['compressed'],  //這個(gè)可以理解為上傳的圖片質(zhì)量類型（官方給的），雖然沒什么卵用，要不然還要我們自己寫壓縮做什么
    sourceType: ['album', 'camera'],  //這個(gè)是圖片來源，相冊(cè)或者相機(jī)
    success: function (res) {
     var tempFilePaths = res.tempFilePaths  //這個(gè)是選擇后返回的圖片列表
     that.getCanvasImg(0, 0, tempFilePaths);  //進(jìn)行壓縮
    } 
   });
 },
 //壓縮并獲取圖片，這里用了遞歸的方法來解決canvas的draw方法延時(shí)的問題
 getCanvasImg: function (index,failNum, tempFilePaths){
  var that = this;
  if (index < tempFilePaths.length){
   const ctx = wx.createCanvasContext('attendCanvasId');
   ctx.drawImage(tempFilePaths[index], 0, 0, 300, 150);
   ctx.draw(true, function () {
    index = index + 1;//上傳成功的數(shù)量，上傳成功則加1
    wx.canvasToTempFilePath({
     canvasId: 'attendCanvasId',
     success: function success(res) {
      that.uploadCanvasImg(res.tempFilePath);
      that.getCanvasImg(index,failNum,tempFilePaths);
     }, fail: function (e) {
      failNum += 1;//失敗數(shù)量，可以用來提示用戶
      that.getCanvasImg(inedx,failNum,tempFilePaths);
     }
    });
   });
  }
 },
 //上傳圖片
 uploadCanvasImg: function (canvasImg){
  var that = this;
  let imgViewList = that.data.imgViewList;
  var tempImg = canvasImg;
  wx.uploadFile({
   url: app.d.fileServer,//文件服務(wù)器的地址
   filePath: tempImg,
   formData: {
    paramPath: "gift"
   },
   name: 'file',
   success: function (res) {
    var json2map = JSON.parse(res.data);
    imgViewList.push(app.d.imageUrlFix + json2map[0].fileUrl);
    that.setData({
     imgViewList: imgViewList,
    })
   }
  })
 },