Ant Design 中上传组件的已上传列表无法展示

Question

Ant Design 中上传组件的已上传列表无法展示是什么问题

Ant Design 中的上传组件正常情况下已经上传的文件会显示一串已上传的文件列表，如下：

同样的代码，放到另一个地方上传文件的列表就显示不出来了，如下：

两处代码是一样的，但第一个能展示正常功能，第二个就有问题，打印出来的存放列表数据的数组是有内容的，代码如下

<a-upload 
          :multiple="true" 
          list-type="picture-card"
          :file-list="detailInfo.attachments"
          :showUploadList="{ showPreviewIcon: true, showRemoveIcon: false, showDownloadIcon: true }"
          @preview="handlePreview"
          @change="handleUploadChange"
          @download="handleDownload">
          <div>
            <a-icon type="plus" />
            <div class="ant-upload-text">{{ $STR('button.common.clickToUpload', '点击上传') }}</div>
          </div>
</a-upload>

以及已上传列表中鼠标移过去以后会出现的删除预览等图标，在showUploadList属性中设置showDownloadIcon: true完全不起效果，设置showPreviewIcon和showRemoveIcon是有效果的，Ant Design的版本是1.7.8，不知道该如何让下载图标显示出来，官方文档里有download方法，但关于下载图标以及怎么触发download方法完全没有提及

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题原因可能是因为第一个地方的上传文件接口返回的数据格式符合Ant Design中上传组件展示已上传文件列表的要求，而第二个地方的上传文件接口返回的数据格式不符合要求，导致无法展示已上传文件列表。 解决方法是检查第二个地方的上传文件接口返回的数据格式是否正确，并将其调整为符合Ant Design中上传组件展示已上传文件列表的要求的格式。 以下是一个示例代码，用于调整上传文件接口返回的数据格式：

// 假设原始返回数据格式如下
const originalData = [
  { name: 'file1', url: 'http://example.com/file1' },
  { name: 'file2', url: 'http://example.com/file2' }
];
// 调整数据格式为Ant Design上传组件要求的格式
const adjustedData = originalData.map((item, index) => ({
  uid: index,
  name: item.name,
  status: 'done',
  url: item.url
}));
// 将adjustedData用于展示已上传文件列表的Ant Design上传组件中

同时，关于下载图标显示问题，可以尝试使用Ant Design提供的download方法来实现。以下是一个示例代码，演示如何使用download方法触发文件下载：

// 定义handleDownload方法
handleDownload = (file) => {
  // 使用download方法触发文件下载
  window.location.href = file.url;
};
// 将handleDownload方法传递给Ant Design上传组件中的download属性
<a-upload
  :file-list="detailInfo.attachments"
  :showUploadList="{ showPreviewIcon: true, showRemoveIcon: false, showDownloadIcon: true }"
  @download="handleDownload"
>
  <div>
    <a-icon type="plus" />
    <div class="ant-upload-text">{{ $STR('button.common.clickToUpload', '点击上传') }}</div>
  </div>
</a-upload>

通过以上调整数据格式和使用download方法的操作，可以解决Ant Design中上传组件的已上传列表无法展示以及下载图标显示问题。