1，前言
最近在寫小程序，用到了wx.uploadFile方法，發現這方法居然不支持同時上傳多個文件，於是自己寫了一個上傳多個的方法。
2，需求
博主做的是用戶投訴頁面；需求是用戶上傳最多三張圖片，最后把圖片和文字和用戶信息等一起提交給服務器；
3，解決思路
博主的解決思路是定義一個遞歸函數，遞歸調用wx.uploadFile上傳，全部完成后結束遞歸。
4，代碼展示
this.data里的數據
/**
* 頁面的初始數據
*/
data: {
imgs:[],//上傳圖片列表
imgPath:[],//已上傳成功的圖片路徑
},
上傳圖片代碼
// 上傳照片
chooseImg (e) {
const _this = this;
let imgs = this.data.imgs;
let imgNumber = this.data.imgs.length;//當前已上傳的圖片張數
if(imgNumber >= 3){
FN.Toast("超出上傳個數");
return false;
}else{
imgNumber = 3 - imgNumber;
};
wx.chooseImage({//打開本地相冊選擇圖片
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; //總數
_this.recursionUploading(tempFilePaths, successUp, failUp, count, length);//調用上傳方法
}
})
},
遞歸上傳方法
//采用遞歸的方式上傳圖片
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{
//遞歸調用，上傳下一張
_this.recursionUploading(imgPaths, successUp, failUp, count, length);
}
}
})
},
預覽大圖
// 預覽大圖
lookBigImg (e) {
let index = e.currentTarget.dataset.index;//索引
let big = this.data.imgs[index];
wx.previewImage({
current: big, // 當前顯示圖片的http鏈接
urls: this.data.imgs // 需要預覽的圖片http鏈接列表
})
},
如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；
END
往期文章
個人主頁