antd vue上传操作，自定义请求控制进度条 + 多文件合并上传请求一个接口

一、自定义请求控制上传进度条

HTML部分

     <a-upload multiple :customRequest="onUpload" :beforeUpload="onBeforeUpload">
       <a-button> 选择文件 </a-button>
     </a-upload>

JS部分

 /* 上传前钩子 */
  const onBeforeUpload = (file) => {};

  /* 上传 */
  const onUpload = (item) => {

    const formData = new FormData();
    // 其他参数
    formData.append('type', 'series');
    // 上传文件
    formData.append('file', item.file);

    request({
      url: '/upload',
      method: 'post',
      data: formData,
      onUploadProgress: (e) => {
        // 文件上传进度回调
        if (e.lengthComputable) {
          item.onProgress({ percent: (e.loaded / e.total) * 100 });
        }
      }
    })
      .then((res) => {
        item.onSuccess();
      })
      .catch((e) => {
        item.onError();
      });
  };

二、多文件合并上传请求一个接口

HTML部分

<a-upload multiple :beforeUpload="beforeUpload" :customRequest="customRequest" :show-upload-list="false">
  <a-button> 选择文件 </a-button>
</a-upload>
<a-button @click="customRequest"> 重试 </a-button>

JS部分

import debounce from "lodash-es/debounce"

const fileList = ref([]);
const beforeUpload = (file, list) => {
  fileList.value = list;
};
const customRequest = debounce(() => {
  const formData = new FormData();
  fileList.value.map((file) => {
    formData.append('file[]', file);
  });

  uploadFilesTest(formData)
      .then((res) => {
        console.log('上传成功');
      })
      .catch((e) => {
        console.log(e.message);
      });
}, 300);

效果