Vue 3 Ant Design 上传组件 customRequest 上传失败如何更改文件状态

在 Ant Design Vue 3 中，可以通过自定义'customRequest'方法来处理上传失败的情况，并更改'fileList'中文件的状态。

首先，需要在'customRequest'方法中处理上传失败的情况。可以使用'axios'或'fetch'等工具发送上传请求，并在请求失败时进行处理。以下是一个示例：

import axios from 'axios';

const customRequest = async ({ action, data, file, headers, onError, onProgress, onSuccess }) => {
  try {
    const formData = new FormData();
    formData.append('file', file);

    const response = await axios.post(action, formData, {
      headers,
      onUploadProgress: (progressEvent) => {
        const percent = Math.floor((progressEvent.loaded / progressEvent.total) * 100);
        onProgress({ percent });
      }
    });

    onSuccess(response.data);
  } catch (error) {
    onError(error);
  }
};

在'onError'方法中，可以进行上传失败时的处理逻辑，例如更改'fileList'中文件的状态。以下是一个示例：

const onError = (error) => {
  // 处理上传失败的逻辑
  console.log('上传失败', error);

  // 更改fileList中文件的状态
  const updatedFileList = fileList.map((file) => {
    if (file.uid === file.uid) {
      return { ...file, status: 'error', error: error.message };
    }
    return file;
  });

  setFileList(updatedFileList);
};

在以上示例中，我们根据文件的'uid'来找到对应的文件，并将其状态更改为'error'，同时将错误信息存储在'error'属性中。

最后，通过'setFileList'方法将更新后的'fileList'应用到组件中，使其重新渲染。

请注意，以上示例中的'fileList'和'setFileList'是你在组件中使用的文件列表和设置文件列表的方法，你需要根据自己的实际情况进行替换。