最近在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); } },