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.如果对 某些数据特殊处理,采用图片形式显示,也可以使用 上面官网中的参数自定义。
/*
希望对你有帮助!
如有错误,欢迎指正,谢谢!
*/