1着帽，前言
最近在寫(xiě)小程序，用到了wx.uploadFile方法孔厉，發(fā)現(xiàn)這方法居然不支持同時(shí)上傳多個(gè)文件聂抢，于是自己寫(xiě)了一個(gè)上傳多個(gè)的方法钧嘶。
[圖片上傳失敗...(image-c4d973-1610865751169)]
2，需求
博主做的是用戶投訴頁(yè)面琳疏；需求是用戶上傳最多三張圖片有决，最后把圖片和文字和用戶信息等一起提交給服務(wù)器；
[圖片上傳失敗...(image-8e50b6-1610865751169)]
3空盼，解決思路
博主的解決思路是定義一個(gè)遞歸函數(shù)书幕，遞歸調(diào)用wx.uploadFile上傳，全部完成后結(jié)束遞歸揽趾。
4台汇，代碼展示
this.data里的數(shù)據(jù)
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
imgs:[],//上傳圖片列表
imgPath:[],//已上傳成功的圖片路徑
},
上傳圖片代碼
// 上傳照片
chooseImg (e) {
const _this = this;
let imgs = this.data.imgs;
let imgNumber = this.data.imgs.length;//當(dāng)前已上傳的圖片張數(shù)
if(imgNumber >= 3){
FN.Toast("超出上傳個(gè)數(shù)");
return false;
}else{
imgNumber = 3 - imgNumber;
};
wx.chooseImage({//打開(kāi)本地相冊(cè)選擇圖片
count: imgNumber,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
const tempFilePaths = res.tempFilePaths;
for(let i = 0;i < tempFilePaths.length; i++){
imgs.push(tempFilePaths[i]);
}
_this.setData({//賦值，回顯照片
imgs: imgs
});
let successUp = 0; //成功
let failUp = 0; //失敗
let count = 0; //第幾張
let length = tempFilePaths.length; //總數(shù)
_this.recursionUploading(tempFilePaths, successUp, failUp, count, length);//調(diào)用上傳方法
}
})
},
遞歸上傳方法
//采用遞歸的方式上傳圖片
recursionUploading(imgPaths, successUp, failUp, count, length){
var _this = this;
wx.showLoading({
title: '正在上傳第' + count + '張',
});
wx.uploadFile({
url: `${app.globalData.baseURL}/api接口地址`,
filePath: imgPaths[count],
formData:{
userId:app.globalData.userMsg.userId
},
name: "uploadImage",
header: {
'content-type': 'multipart/form-data'
},
success (e) {
console.log(e)
let path = _this.data.imgPath;
let obj = e.data;
if(obj.status === "y"){
path.push(obj.infoObject);
_this.setData({
imgPath:path
});
}
successUp++;//成功+1
},
fail (e) {
failUp++;//失敗+1
},
complete (e) {
count++;//下一張
if(count == length){
FN.Toast(`上傳成功${successUp}`)
}else{
//遞歸調(diào)用但骨，上傳下一張
_this.recursionUploading(imgPaths, successUp, failUp, count, length);
}
}
})
},
預(yù)覽大圖
// 預(yù)覽大圖
lookBigImg (e) {
let index = e.currentTarget.dataset.index;//索引
let big = this.data.imgs[index];
wx.previewImage({
current: big, // 當(dāng)前顯示圖片的http鏈接
urls: this.data.imgs // 需要預(yù)覽的圖片http鏈接列表
})
},
如果看了覺(jué)得有幫助的励七，我是@鵬多多11997110103，歡迎 點(diǎn)贊 關(guān)注 評(píng)論奔缠；
END
往期文章
個(gè)人主頁(yè)
