哈喽,大家好,小编又来了。最近小编在调试uniapp的一个功能,在上传多个图片时候需要对返回结果做处理,刚开始使用循环上传时候,组装结果数据出现了数据重复的情况,小编很明确知道这是因为uni.uploadFile上传属于异步上传造成的,效果如下:
uni.chooseImage({
count: 6,
sizeType: ['original', 'compressed'],
sourceType: ["camera",'album'],
success: async (res) => {
let data = res.tempFilePaths;
var api_url = that.util.util_api("common_upload", "img") + "&filetype=img";
let message="";
for (var i = 0; i < data.length; i++) {
uni.uploadFile({
url: api_url,
name: "file",
filePath: data[i],
success(rs) {
let filedata = JSON.parse(rs.data).data;
console.log("上传图片的返回结果:" + filedata.url);
message = message + "<img src=\"" + that.util.util_path(filedata.url) + "\" />";
},
});
}
setTimeout(function(){
console.log("组装后的结果:"+message);
},2000);
}
});
就这样出现了结果组装数据重复的情况,经过检查后台发现,后台图片都是成功上传并且成功返回的,结果并没有重复的现象,即使小编使用setTimeout函数也没有处理掉,首先在网上看好像并没有完整的解决方案,经过小编的一系列思考,终于处理掉了,废话不多说,直接上代码。
methods:{
test(){
uni.chooseImage({
count: 6,
sizeType: ['original', 'compressed'],
sourceType: ["camera",'album'],
success: async (res) => {
let data = res.tempFilePaths;
var api_url = that.util.util_api("common_upload", "img") + "&filetype=img";
let uploadPromises = [];
for await (const item of data) {
await uploadPromises.push(await that.uploadImage(api_url, item));
}
let message="";
for (var i = 0; i < uploadPromises.length; i++) {
let filedata = JSON.parse(uploadPromises[i].data).data;
message = message + "<img src=\"" + that.util.util_path(filedata.url) + "\" />";
console.log("上传图片的返回结果:" + filedata.url);
}
console.log("最终的结果:"+message);
}
});
},
uploadImage(apiUrl, filePath) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: apiUrl,
name: "file",
filePath: filePath,
success: (rs) => {
resolve(rs);
},
fail: (error) => {
reject(error);
},
});
});
},
}
通过async+await,再加上Promise才成功解决了组装上传结果的重复问题,效果如下:
到这里,这个小异常已经解决好了,感谢大家的支持,如有不足之处,欢迎大家指正!