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

在Ant Design Vue库中，`a-upload`组件的`customRequest`属性通常用于自定义上传文件的行为，包括发送HTTP请求。如果你遇到上传多个文件时请求多次接口的问题，可能是由于每次点击“添加”按钮或提交表单时都触发了一次新的上传请求。

解决这个问题的关键在于如何控制上传过程。你可以通过以下几个步骤来处理：

1. 避免重复请求：在用户点击“添加”或提交表单前，检查当前已上传的文件数组是否为空，或者是否已经有一个正在处理的请求。如果不是，再发起新的请求。

<template>
  <a-upload
    :listType="listType"
    :customRequest="uploadFiles"
    ref="upload"
  ></a-upload>
</template>

<script>
export default {
  methods: {
    uploadFiles(file) {
      if (this.updating || this.files.length === 0) {
        this.updating = true;
        // 发起实际的网络请求，这里假设你已经有了一个handleUpload函数
        this.handleUpload(file);
      }
    },
    handleUpload(file) {
      // 在此处处理文件上传，比如发送POST请求到服务器
      // 请求完成后更新状态并清除标志
      this.$axios.post('/api/upload', file)
        .then(() => {
          this.updating = false;
          this.files.push(file); // 将文件添加到列表
        })
        .catch((error) => {
          console.error(error);
        });
    }
  }
}
</script>

2. 使用Promise.all 或者 async/await 来并发管理多个请求：如果需要同时发送多个请求，可以将它们放入一个Promise.all对象里，等待所有请求完成后再进行下一步操作。

3. 错误处理：记得对每个请求进行错误处理，以便在出现问题时能及时反馈给用户。