Antd中Upload并行上传多个文件:

一、解决方案:

使用Promise.all实现批量上传:

const beforeUpload: UploadProps["beforeUpload"] = async (file, fileList) => {
			const res = await getQiniuTokenApi();
			const uploadPromises = fileList.map(async (file, index) => {
				return new Promise((resolve, reject) => {
					const formData = new FormData();
					formData.append("file", file);
					formData.append("token", res.data?.upToken || "");
					fetch("https://upload.qiniup.com/", {
						method: "POST",
						body: formData
					})
						.then(response => {
							if (response.status === 200) {
								resolve(response);
							} else {
								reject(new Error(`Upload failed${index}`));
							}
						})
						.catch(error => reject(error));
				});
			});
			Promise.all(uploadPromises)
			 .then(() => message.success("文件上传成功"))
			 .catch(() => message.error("文件上传失败"));
			return false; // 阻止默认上传行为
		};

二、Promise.all详解:

Promise.all 是 JavaScript 中处理多个 Promise 的一个非常有用的方法，它可以将多个 Promise 实例包装成一个新的 Promise 实例。

基本语法:

//iterable：一个可迭代对象（如 Array 或 String），包含多个 Promise

Promise.all(iterable);

特点:

• 全部成功：当所有输入的 Promise 都成功解决（resolve）时，Promise.all 返回的 Promise 才会解决，解决值是一个数组，包含所有输入 Promise 的解决值，顺序与输入顺序一致。

• 一个失败：如果任何一个输入的 Promise 被拒绝（reject），Promise.all 会立即拒绝，并返回第一个被拒绝的 Promise 的原因。

使用场景:

1. 并行执行多个异步操作，等待所有操作完成

2. 需要多个异步操作都成功才能继续执行的场景

3. 聚合多个API调用的结果

注意事项:

• 如果传入空数组，它会立即解决（resolve）

• 输入 Promise 是并行执行的，但结果的顺序与输入顺序一致

• 一旦有一个 Promise 被拒绝，其他 Promise 的结果会被忽略（但它们的执行不会被中断）