ant design vue upload组件实现多文件上传接口只调用一次

1,144 阅读1分钟

在使用antdv的upload组件实现多文件批量上传时,发现实际上发送了多次请求,这不符合业务要求,我们需要把一次上传的多个文件放到一个数组中作为一次上传的formData
每个文件都会走一遍beforeUpload,所以在beforeUpload中将文件push到一个数组中,直到最后一个文件,这时候调用自定义上传,否则return false阻止触发actionimage.png beforeUpload

function handleBeforeUpload(file,fileList) {
  uploadFiles = [...(uploadFiles || []), file];
  if (uploadFiles.length === fileList.length) {
    customRequest();//自定义上传
  }
}

注意到这个函数接收两个参数,无论是第几次调用beforeUploadfileList的长度都是上传文件总数,而file是一个一个传的,所以每次都把file加到上传文件列表uploadFiles中,直到uploadFilesfileList长度一致。
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是一个数组。 image.png