Antd上传组件 不支持PDF预览解决办法

929 阅读1分钟

最近在react项目中遇到一个问题,在使用antd, upload组件时遇到上传pdf文件, 预览按钮置灰无法预览的问题 ,网上搜索一番后没有找到答案,故此记录一下

如图所示,上传pdf文件后 ,upload的预览按钮是置灰状态,无法点击,也就无法触发onPreview 事件处理预览的逻辑判断 

 平时在文件上传失败时,预览按钮才是置灰状态,排查发现拿到了上传pdf文件后的oss地址

但是thumbUrl没有值 ,在onChange事件中 主动进行赋值后解决了预览按钮置灰问题

  onChange={(info) => {          console.log('onChnage', info);          if (!info.file.status && info.fileList.length) {            if (info.file.uid === info.fileList[info.fileList.length - 1].uid) {              info.fileList.pop();            }          }          info.fileList = info.fileList.map((item) => {            item.thumbUrl = item.response ? item.response.data : info.file.thumbUrl;            return item;          });          if (info.file && info.file.status)            if (handleOcr && info.file.status === 'done') {              if (info.file.response && info.file.response.code === ResultEnum.SUCCESS) {                handleOcr(info.file.response.data);              }            }        }}

然后在onPreview事件中进行业务逻辑处理 pdf和图片文件不同的预览方式

onPreview(file) {            if (isImage(file.thumbUrl)) {              if (file.url) {                setVisible(true);                setPreviewUrl(file.url);                return;              }              if (file?.response?.code === ResultEnum.SUCCESS) {                setVisible(true);                setPreviewUrl(file.response.data);              }            } else {              window.open(file.thumbUrl);            }          },