当前位置: 首页 > news >正文

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"

      <!-- 缩略图显示异常 --><AUploadlist-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.如果对 某些数据特殊处理,采用图片形式显示,也可以使用 上面官网中的参数自定义。

/*

希望对你有帮助!

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

*/

http://www.lryc.cn/news/621686.html

相关文章:

  • 用3D打印重新定义骑行-中科米堆CASAIM自行车座椅个性化设计
  • Spring Ai 如何配置以及如何搭建
  • Cursor CLI 技术解析:免费调用 GPT-5 的命令行方案
  • Flink的状态管理
  • 项目篇------------网页五子棋(知识预备)
  • GPT 解码策略全解析:从 Beam Search 到 Top-p 采样
  • spring ai-openai-vl模型应用qwen-vl\gpt-文字识别-java
  • 自学大语言模型之Transformer的Tokenizer
  • 用GPT解释“GPT-5”是什么,有什么优势
  • Spring IOC容器在Web环境中的启动奥秘:深入源码解析
  • Grafana 与 InfluxDB 可视化深度集成(一)
  • Al大模型-本地私有化部署大模型-大模型微调
  • 算法学习远程访问:借助 cpolar 内网穿透服务使用 Hello-Algo
  • 以下是对智能电梯控制系统功能及系统云端平台设计要点的详细分析,结合用户提供的梯控系统网络架构设计和系统软硬件组成,分点论述并补充关键要点:
  • JavaScript 核心基础:类型检测、DOM 操作与事件处理
  • C++——分布式
  • 力扣 —— 二分查找
  • 【JAVA 基础入门】运算符详细介绍
  • 【软件设计模式】工厂方法与抽象工厂
  • 【办公类110-01】20250813 园园通新生分班(python+uibot)
  • 微信小程序 拖拽签章
  • GitHub 热榜项目 - 日榜(2025-08-15)
  • Redis核心架构
  • Java 大视界 -- Java 大数据在智能教育虚拟学习环境构建与学习体验增强中的应用(399)
  • electron之win/mac通知免打扰
  • 基本电子元件:碳膜电阻器
  • iOS App TF 上架多工具协作实战,一次高效的应用内测分发流程
  • iOS 性能监控实战,多工具协作完成全方位分析
  • 高并发场景下限流算法对比与实践指南
  • Day59--图论--47. 参加科学大会(卡码网),94. 城市间货物运输 I(卡码网)