循环调用接口拿到值之后再执行下一步操作;Promise.all处理。

循环调用接口拿到值之后再执行下一步操作;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
					}
				})
			})
	},

我觉得这种等待循环调用接口的地方都适合这个处理方式,大佬们出手吧,还有没有其他的解决方法。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值