Open AZCodingAccount opened 4 months ago
上传失败后手动设置上传失败的status后,hover的话会出现代码
upload组件代码
<Upload listType="picture-card" maxCount={1} fileList={fileList} onPreview={handlePreview} onChange={handleChange} > {fileList.length !== 1 && uploadButton} </Upload>
tsx文件handleChange代码
const [fileList, setFileList] = useState<UploadFile[]>([]); const handleChange: UploadProps['onChange'] = async (info) => { setFileList(info.fileList); if (info.file.status === 'uploading') { return; } if (info.file.status === 'done') { const formData = new FormData(); formData.append('file', info.file.originFileObj as File); try { const res = await upload(formData); console.log(res); if (res.code === 1) { message.success('上传成功'); setImageUrl(res.data); } else { // 设置上传失败的状态 // 异步更新预览图片 setFileList((prevFileList) => [ { ...prevFileList[0], status: 'error', // 上传错误 }, ]); } } catch (error) { // 异步更新预览图片 setFileList((prevFileList) => [ { ...prevFileList[0], status: 'error', // 上传错误 }, ]); } } };
hover后出现预览效果,不应该是一串html代码
🐛 bug 描述
上传失败后手动设置上传失败的status后,hover的话会出现代码![image](https://github.com/ant-design/ant-design-pro/assets/145426558/c0c697c9-7599-4c27-be53-fab4235da73a)
📷 复现步骤 | Recurrence steps
upload组件代码
tsx文件handleChange代码
🏞 期望结果 | Expected results
hover后出现预览效果,不应该是一串html代码
© 版本信息