重慶分公司
重慶分公司，新征程啟航
為企業(yè)提供網(wǎng)站建設(shè)、域名注冊(cè)、服務(wù)器等服務(wù)
微信小程序之批量上傳并壓縮圖片的實(shí)例代碼
具體內(nèi)容如下所示：
成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)服務(wù)商，為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)服務(wù)，網(wǎng)站設(shè)計(jì)，綿陽(yáng)服務(wù)器托管等一站式綜合服務(wù)型公司，專(zhuān)業(yè)打造企業(yè)形象網(wǎng)站，讓您在眾多競(jìng)爭(zhēng)對(duì)手中脫穎而出成都創(chuàng)新互聯(lián)。
首先，要在.wxml文件里面創(chuàng)建一個(gè)canvas，作用是承載壓縮的圖片，以供上傳的時(shí)候獲取
這個(gè)canvas不能隱藏，否則沒(méi)效果，可以將其移至屏幕外。
然后呢，就是.js文件里面的方法了
// 點(diǎn)擊加_壓縮
takePhoto: function () {
var that = this;
let imgViewList = that.data.imgViewList; //這個(gè)是用來(lái)承載頁(yè)面循環(huán)展示圖片的
//拍照、從相冊(cè)選擇上傳
wx.chooseImage({
count: 4, //這個(gè)是上傳的最大數(shù)量，默認(rèn)為9
sizeType: ['compressed'], //這個(gè)可以理解為上傳的圖片質(zhì)量類(lèi)型（官方給的），雖然沒(méi)什么卵用，要不然還要我們自己寫(xiě)壓縮做什么
sourceType: ['album', 'camera'], //這個(gè)是圖片來(lái)源，相冊(cè)或者相機(jī)
success: function (res) {
var tempFilePaths = res.tempFilePaths //這個(gè)是選擇后返回的圖片列表
that.getCanvasImg(0, 0, tempFilePaths); //進(jìn)行壓縮
}
});
},
//壓縮并獲取圖片，這里用了遞歸的方法來(lái)解決canvas的draw方法延時(shí)的問(wèn)題
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ù)量，可以用來(lái)提示用戶(hù)
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,
})
}
})
},總結(jié)
以上所述是小編給大家介紹的微信小程序之批量上傳并壓縮圖片的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
分享標(biāo)題：微信小程序之批量上傳并壓縮圖片的實(shí)例代碼
分享地址：http://www.xueling.net.cn/article/phocph.html