搞了好几天了解决不了，有没有大神为我解答？
云开发上传多个图片，用户选择多个图片，上传时显示进度，上传完成后图片按照当时的选择顺序显示。
代码大致结构如下：
data: { imagesPreview: []},postImages: function() { wx.chooseImage({ //选择9张图片 success: function(res) { var filePaths = res.filePaths //把本地临时路径放在集合里 for (var i in filePaths) { var imagesTemp = { 'filePath': filePaths[i], 'fileID': '', 'progress': 0 } that.data.imagesPreview.push(imagesTemp) } //再一次循环，根据上传返回结果依次改变集合内的对应值 for (var j in filePaths) { var filePath = that.data.imagesPreview[j].filePath var fileName = common.getUniqueFileName(app.globalData.userInfo._id) var cloudPath = fileName + filePath.match(/\.[^.]+?$/)[0] var uploadTask = wx.cloud.uploadFile({ //... success: res => { that.data.imagesPreview[j].fileID = res.fileID that.setData({ imagesPreview: that.data.imagesPreview }) } }) uploadTask.onProgressUpdate((res) => { that.data.imagesPreview[j].progress = res.progress that.setData({ imagesPreview: that.data.imagesPreview }) }) } }, })}, |
比如选了3张图片
imagePreview = [{'filePath':'地址1','fileID':'','progress':0},{'filePath':'地址2','fileID':'','progress':0},{'filePath':'地址3','fileID':'','progress':0}] |
当准备上传这3张图片时，进度progress只会在最后一个{‘filePath’:‘地址3’,‘fileID’:’’,‘progress’:0}里面更新，返回的fileID也是。
查了遍console.log，应该是由于上传文件是异步处理，遍历完了之后uploadFile结果还没返回，并且j停留在集合最后一个。
所以问题来了，要做到fileID和progress都能在集合内对应的位置更新该怎么办？
postImages: function() {
var t = this
wx.chooseImage({
//选择9张图片
success: function (res) {
var filePaths = res.filePaths, fileList = []
//把本地临时路径放在集合里
for (var i in filePaths) {
fileList.push({ ‘filePath’: filePaths[i], ‘fileID’: ‘’, ‘progress’: 0 })
}
if (fileList.length <= 0) return
t.setData({
imagesPreview: fileList
})
t.uploadLoop(fileList, 0)
},
})
},
uploadLoop(fileList, idx){
var t = this
var filePath = fileList[idx].filePath
var fileName = common.getUniqueFileName(app.globalData.userInfo._id)
var cloudPath = fileName + filePath.match(/\.[^.]+?$/)[0]
wx.cloud.uploadFile({
//…
success(res) {
t.setData({
[‘imagesPreview.’ + idx + ‘.fileID’]: res.fileID
})
},
fail(err) {
console.error(fileList[idx], err)
},
complete(res){
idx + 1 <= fileList.length && t.uploadLoop(fileList, idx + 1)
}
}).onProgressUpdate((res) => {
t.setData({
[‘imagesPreview.’ + idx + ‘.progress’]: res.progress
})
})
}
强力驱动