在使用antdv的upload组件实现多文件批量上传时,发现实际上发送了多次请求,这不符合业务要求,我们需要把一次上传的多个文件放到一个数组中作为一次上传的formData。
每个文件都会走一遍beforeUpload,所以在beforeUpload中将文件push到一个数组中,直到最后一个文件,这时候调用自定义上传,否则return false阻止触发action。
beforeUpload
function handleBeforeUpload(file,fileList) {
uploadFiles = [...(uploadFiles || []), file];
if (uploadFiles.length === fileList.length) {
customRequest();//自定义上传
}
}
注意到这个函数接收两个参数,无论是第几次调用beforeUpload,fileList的长度都是上传文件总数,而file是一个一个传的,所以每次都把file加到上传文件列表uploadFiles中,直到uploadFiles和fileList长度一致。
customRequest
function customRequest() {
const formData = new FormData();
uploadFiles.forEach((file: any) => {
formData.append("files", file as any);
});
uploadFiles(formData).then((res) => {
if (res.code == 200) {
message.success("文件上传成功");
});
}
这里files是一个数组。