用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

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

Rolan 2020-6-30 00:54

具體內容如下所示:首先,要在.wxml文件里面創建一個canvas,作用是承載壓縮的圖片,以供上傳的時候獲取這個canvas不能隱藏,否則沒效果,可以將其移至屏幕外。canvas canvas-id='attendCanvasId' class='myCanvas'/ ...

具體內容如下所示:

首先,要在.wxml文件里面創建一個canvas,作用是承載壓縮的圖片,以供上傳的時候獲取

這個canvas不能隱藏,否則沒效果,可以將其移至屏幕外。

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

然后呢,就是.js文件里面的方法了

// 點擊加_壓縮
 takePhoto: function () {
  var that = this;
  let imgViewList = that.data.imgViewList; //這個是用來承載頁面循環展示圖片的
   //拍照、從相冊選擇上傳
   wx.chooseImage({
    count: 4,  //這個是上傳的最大數量,默認為9
    sizeType: ['compressed'],  //這個可以理解為上傳的圖片質量類型(官方給的),雖然沒什么卵用,要不然還要我們自己寫壓縮做什么
    sourceType: ['album', 'camera'],  //這個是圖片來源,相冊或者相機
    success: function (res) {
     var tempFilePaths = res.tempFilePaths  //這個是選擇后返回的圖片列表
     that.getCanvasImg(0, 0, tempFilePaths);  //進行壓縮
    }
   });
 },
 //壓縮并獲取圖片,這里用了遞歸的方法來解決canvas的draw方法延時的問題
 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;//上傳成功的數量,上傳成功則加1
    wx.canvasToTempFilePath({
     canvasId: 'attendCanvasId',
     success: function success(res) {
      that.uploadCanvasImg(res.tempFilePath);
      that.getCanvasImg(index,failNum,tempFilePaths);
     }, fail: function (e) {
      failNum += 1;//失敗數量,可以用來提示用戶
      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,//文件服務器的地址
   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,
    })
   }
  })
 },

總結

以上所述是小編給大家介紹的微信小程序之批量上傳并壓縮圖片的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對我們網站的支持!

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 張生榮 來自: 碼融融
快乐十分复式