Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upload组件上传失败后hover出现异常代码 #11220

Open
AZCodingAccount opened this issue Apr 27, 2024 · 0 comments
Open

upload组件上传失败后hover出现异常代码 #11220

AZCodingAccount opened this issue Apr 27, 2024 · 0 comments

Comments

@AZCodingAccount
Copy link

AZCodingAccount commented Apr 27, 2024

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

🏞 期望结果 | Expected results

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

© 版本信息

  • Ant Design Pro 版本: [6.0.0]
  • umi 版本
  • 浏览器环境
  • 开发环境 [Windows]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant