按照顺序上传图片获取fileID(原方案数据混乱、递归上传方案)
原方案是for遍历(没有改良) 异步导致获取的fileID混乱
- 云存储里图片是按照顺序上传的,原本以为团队做了递归优化,后来发现不对,再看了看时间确认了异步处理。
- temp为待上传图片数组
//for遍历原方案:虽然有promise,但是没有抛出数据直接在循环提内setData导致数据混乱
for (let i = 0, len = temp.length; i < len; i++) {
httpData.push(
new Promise((reslove, reject) => {
//cloudPath为文件名
let cloudPath =
"postImage/" +
new Date().getTime() +
temp[i].match(/\.[^.]+?$/)[0];
//上传存储
wx.cloud.uploadFile({
cloudPath,
filePath: temp[i],
success: (res) => {
this.setData({
fileIDs: this.data.fileIDs.concat(res.fileID),
});
console.log(res.fileID);
reslove();
},
fail: (res) => {
console.log(res);
},
});
})
);
}
//promise后面将得到的数据一起上传数据库
promise.all(httpData).then(){
//下一步
}
递归上传方案:顺序正确,耗时增加
//递归上传方案
const upload = function (imgArr, i = 0) {
return new Promise((reslove, reject) => {
//迭代体放在promise中
let fileIDs = [];
function uploadImg(imgArr, i) {
if (imgArr.length <= i) {
//将fileIDs放入reslove中
reslove(fileIDs);
return;
} else {
let cloudPath =
"postImage/" + new Date().getTime() + imgArr[i].match(/\.[^.]+?$/)[0]; //文件名
wx.cloud.uploadFile({
cloudPath,
filePath: imgArr[i],
success: (res) => {
fileIDs.push(res.fileID);
uploadImg(imgArr, i + 1);
},
});
}
}
//不要忘记调用
uploadImg(imgArr, i);
});
};
//upload传入图片数据等待完成
upload(temp).then(res=>{
//将获取的fileID转换为真实链接
//......
})
- 递归方案之后获取的fileID顺序正确,处理时间也正确