ant design的upload组件踩坑记录

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，就用缩略图！

3.图片上传后，从接口里拿的文件回显时，图片缩略图不展示。

问题展现：

解决方法：接口回显时拿到的fileList进行处理，thumbUrl用于展示缩略图的url，拿文件的url赋值即可。