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

在 Vue3 中，如果使用 Ant Design 的上传组件，并且想要自定义上传请求（customRequest），并在上传失败时更改文件状态（fileList），可以按照以下步骤进行操作：

1. 在组件中引入 Ant Design 的上传组件和相关方法：

import { Upload, message } from 'ant-design-vue';

2. 在组件的data选项中定义一个fileList数组，用于存储上传的文件列表：

data() {
  return {
    fileList: [],
  };
},

3. 在上传组件中设置customRequest属性，并在该属性的回调函数中处理上传请求的逻辑。在上传失败时，可以通过message.error方法显示错误信息，并更改fileList中对应文件的状态：

<Upload
  :customRequest='customRequest'
  :file-list='fileList'
>
  <a-button icon='upload'>Click to Upload</a-button>
</Upload>

methods: {
  customRequest(options) {
    // 处理上传请求的逻辑
    // 上传失败时，调用以下代码更改文件状态
    const { file } = options;
    const error = new Error('Upload failed');
    file.status = 'error';
    file.response = error;
    this.fileList = [...this.fileList];
    message.error('Upload failed');
  },
},

4. 最后，确保在组件的template中使用fileList来渲染上传列表：

<Upload
  :customRequest='customRequest'
  :file-list='fileList'
>
  <a-button icon='upload'>Click to Upload</a-button>
</Upload>

<a-list
  class='upload-list'
  item-layout='horizontal'
  :dataSource='fileList'
  :renderItem='renderItem'
/>

methods: {
  renderItem(file) {
    return (
      <a-list-item>
        <a-list-item-meta
          title={file.name}
          description={file.status === 'error' ? 'Upload failed' : 'Upload success'}
        />
      </a-list-item>
    );
  },
},

通过以上步骤，你可以在 Vue3 中使用 Ant Design 的上传组件，并在自定义上传请求失败时更改文件状态。