vue3解决 Antd Design vue a-upload customRequest 属性上传多个文件请求多次接口问题

在 Vue3 中，如果你在使用 Antd Design 的 Upload 组件时遇到上传多个文件并可能导致多次发送请求的问题，特别是在设置了 `customRequest` 属性的情况下，这通常是由于每次上传单个文件时，`customRequest` 被独立触发导致的。Antd Upload 的 `customRequest` 是允许开发者自定义发送请求的方式，但这意味着如果每个文件都单独发送请求，会分别触发一次。

为了解决这个问题，你需要在 `customRequest` 中处理批量上传逻辑。通常的做法是：

1. **合并文件**：将所有要上传的文件打包成一个数组或者一个 Blob 对象，以便于一次性发送到服务器。

const fileList = []; // 存储所有待上传文件
// ...收集文件操作
const formData = new FormData();
fileList.forEach(file => {
  formData.append('files', file);
});

2. **发送一次性请求**：创建一个新的 axios 或者你使用的 HTTP 客户端实例，并在其中发送包含所有文件的单次请求。

const url = '你的上传接口地址';
axios.post(url, formData)
  .then(response => {
    console.log(response);
    // 处理上传成功后的回调
  })
  .catch(error => {
    console.error(error);
  });

3. **处理上传状态**：在返回的响应中解析状态信息，更新组件的状态来反映整个上传过程，而不是针对每个文件。