循环调用接口拿到值之后再执行下一步操作;Promise.all处理。
需求是小程序上传图片只允许单个上传,多图需循环调用upload,后面的表单提交依赖第三方图片库链接。
大概用在表单附带图片提交比较多,具体看实现:
//this.fileList 已选择文件的列表
const files = this.fileList.map(item => this.uploadFiles(item))
//这里用Promise.all来聚合多个异步任务的结果
const urls = await Promise.all(files)
//下面进行提交操作
//......
接下来是上传部分,return一个Promise并通过resolve返回当前上传后的图片链接:
uploadFiles(item) {
return new Promise((resolve, rejects) => {
uni.uploadFile({
url: '接口地址',
filePath: item.path, //图片路径
name: 'multipartFile',
// formData: data,
header: {
"token": uni.getStorageSync("token"),
"Content-Type": "multipart/form-data"
},
success: (res) => {
//file为后端返回图片地址
let url = JSON.parse(res.data).data
resolve(url) //处理file
}
})
})
},
我觉得这种等待循环调用接口的地方都适合这个处理方式,大佬们出手吧,还有没有其他的解决方法。