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

ant design的upload组件踩坑记录

news 2025/6/26 1:30:31

antd版本 v4.17.0

1.自定义了onpreview和onchange事件，上传文件后，文件显示有preview的icon但是被禁用，无法调用onpreview事件。

问题展现：

苦苦查找原因，问题出在了这里，当文件没有url的时候，按钮被禁用掉了，官方文档没有说明。

2.给图片和pdf文件自定义了icon，但是pdf的icon正常展示，图片一直显示缩略图

问题展现：

这是自定义的iconRender函数函数正常

  iconRenderU = (file) => {const { type = '', status = '', url = '' } = file;if (status === 'done') {if ((type.indexOf('pdf') > -1 || url?.includes('.pdf')) && status === 'done') {return <img src={upload_Pdf} style={{ height: '58%', display: 'inherit' }} />} else if (type.indexOf('image/') > -1) {return <img src={upload_img} style={{ height: '58%', display: 'inherit' }} />}} else {return <div style={{ textAlign: 'center' }}><LoadingOutlined style={{ color: '#BA051B' }} /></div>}}

定位问题，问题出在了listType这个属性上，配置了‘picture-card’后 iconRender函数对于图片类型的失效。

解决办法，把listType属性去掉，取默认值text

但是！！这样的话要给upload写样式。。更麻烦，于是找产品解决，不用icon，就用缩略图！