Ant-Design AUpload如何显示缩略图；自定义哪些类型的数据可以使用img预览

目录

一、问题

二、原因及解决方法

三、总结

一、问题

1.测试说 原来的php页面上传的时候支持缩略图显示，但是使用 ant-design Aupload重构后不支持显示缩略图，只显示了一个文件图标，需要点击预览才能查看。

例如：缩略图：https://testwsdd.ysbang.cn/data/img/type_docs/2025/08/14/4-65A56B7A88E5D.10?e=1755241833&token=CvC8byzccEXvJfif1OFBJqsKDORzJKFtHx0YEaaR:zVRrKdFlrIk1UKKHa0ZES0PYcdo​​​​​​=

现在的显示：

二、原因及解决方法

1.解决方法

1）在Aupload中添加配置项 :isImageUrl="() => true"

      <!-- 缩略图显示异常 -->
      <AUpload
        list-type="picture-card"
        :file-list="[
          {
            uid: '-1',
            name: 'xxx.png',
            status: 'done',
            type: 'image/*',
            url: 'https://testwsdd.ysbang.cn/data/img/type_docs/2025/08/14/4-65A56B7A88E5D.10?e=1755241833&token=CvC8byzccEXvJfif1OFBJqsKDORzJKFtHx0YEaaR:zVRrKdFlrIk1UKKHa0ZES0PYcdo=',
            thumbUrl:
              'https://testwsdd.ysbang.cn/data/img/type_docs/2025/08/14/4-65A56B7A88E5D.10?e=1755241833&token=CvC8byzccEXvJfif1OFBJqsKDORzJKFtHx0YEaaR:zVRrKdFlrIk1UKKHa0ZES0PYcdo='
          }
        ]"
      ></AUpload>
      <!-- 缩略图正常显示 -->
      <AUpload
        :isImageUrl="() => true"
        list-type="picture-card"
        :file-list="[
          {
            uid: '-1',
            name: 'xxx.png',
            status: 'done',
            type: 'image/*',
            url: 'https://testwsdd.ysbang.cn/data/img/type_docs/2025/08/14/4-65A56B7A88E5D.10?e=1755241833&token=CvC8byzccEXvJfif1OFBJqsKDORzJKFtHx0YEaaR:zVRrKdFlrIk1UKKHa0ZES0PYcdo=',
            thumbUrl:
              'https://testwsdd.ysbang.cn/data/img/type_docs/2025/08/14/4-65A56B7A88E5D.10?e=1755241833&token=CvC8byzccEXvJfif1OFBJqsKDORzJKFtHx0YEaaR:zVRrKdFlrIk1UKKHa0ZES0PYcdo='
          }
        ]"
      ></AUpload>

2)  对比效果如下图所示，左边无法正常显示: 左边直接渲染了span，没有渲染img标签

2.原因

  根据1-2）中检查html元素，源码应该自己有判断逻辑。判断什么时候应该显示图片。查看源码，确实如此

3. 所以 添加 isImageUrl配置项，相当于重写isImageUrl方法，自定义什么时候 使用img显示fileList。

4.因为平时较少使用，所以没有注意到这个属性。官方文档中也有写

三、总结

1.重写isImageUrl方法控制 Ant-Design Aupload中的fileList里的数据是否使用 图片形式显示

2.如果对 某些数据特殊处理，采用图片形式显示，也可以使用 上面官网中的参数自定义。

/*

希望对你有帮助！

如有错误,欢迎指正,谢谢！

*/