Vue3 Ant Design 上传组件 customRequest 失败更改文件状态

在 Vue3 中使用 Ant Design 的上传组件，如果自定义上传请求（customRequest）失败，需要更改文件状态（fileList），可以通过以下步骤实现：

1. 在上传组件的beforeUpload属性中，设置一个自定义的上传函数，并将该函数存储在组件的methods中：

<template>
  <a-upload :beforeUpload="handleUpload">
    <a-button>上传文件</a-button>
  </a-upload>
</template>

<script>
export default {
  methods: {
    handleUpload(file) {
      const formData = new FormData();
      formData.append('file', file);

      // 调用自定义上传函数
      this.customRequest(formData);
      // 返回 false 阻止自动上传
      return false;
    },
    customRequest(formData) {
      // 自定义上传请求，可以使用 axios 或其他库发送请求
      // 在请求失败时，更新文件状态（fileList）
      // this.$refs.upload.clearFiles(); // 清空文件列表
      // this.$refs.upload.uploadFiles(fileList); // 重新上传文件
    },
  },
};
</script>

2. 在自定义上传请求函数中，可以使用 axios 或其他库发送上传请求，并在请求失败时更新文件状态（fileList）。你可以使用this.$refs.upload.clearFiles()清空文件列表，然后使用this.$refs.upload.uploadFiles(fileList)重新上传文件。

注意，this.$refs.upload需要引入组件的ref属性，例如：

<a-upload ref="upload" :beforeUpload="handleUpload">

这样就可以在上传失败时更改文件状态（fileList）。