ant-design/ant-design-pro

🐛 [BUG]

Closed this issue · 1 comments

upload组件上传失败后hover错误

🐛 bug 描述

上传失败后手动设置上传失败的status后,hover的话会出现代码
image

image

📷 复现步骤 | Recurrence steps

upload组件代码

     <Upload
            listType="picture-card"
            maxCount={1}
            fileList={fileList}
            onPreview={handlePreview}
            onChange={handleChange}
          >
            {fileList.length !== 1 && uploadButton}
          </Upload>

tsx文件handleChange代码

  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', // 上传错误
          },
        ]);
      } 
    }
  };

🏞 期望结果 | Expected results

hover后出现预览效果,不应该是一串html代码

© 版本信息

  • Ant Design Pro 版本: [6.0.0]
  • umi 版本
  • 浏览器环境
  • 开发环境 [Windows]

当前 Issue 未检测到标题,请规范填写,谢谢!

The title of the current issue is not detected, please fill in according to the specifications, thank you!