时间戳

首页 > 解决方案 > AntD 的 Upload 一直显示 failed tooltip 但上传成功

reactjs - AntD 的 Upload 一直显示 failed tooltip 但上传成功

问题描述

我正在使用 antd 的 Upload 组件，它的任务是上传图片，然后我抓取该图片并将其发送到 API 进行存储。但是我不断收到上传失败的消息工具提示，因为我没有使用action他们提供的任何道具。甚至他们自己的网站也有这个问题，因为我试图上传一些东西，它显示失败的消息，但它实际上已经上传了。antd的上传

我正在使用 useState 来保存文件const [uploadedImage, setUploadedImage] = useState();

我的fileProps样子是这样的：

  const fileProps = {
    name: 'file',
    multiple: false,
    onChange(info) {
      if (info.file.status !== 'uploading') {
         let reader = new FileReader();
          reader.onload = (e) => {
             setData({
              ...data,
              image: new File([e.target.result], info.file.name),
            });
            setIsFileUploaded(true);
          }
          reader.readAsDataURL(info.file.originFileObj);
          setUploadedImage(info.file.originFileObj);
      }
    },
  };

然后我将它传递给上传组件：

<Upload {...fileProps}>
   <Button icon={<UploadOutlined />}>Upload Image</Button>
</Upload>

为什么即使它成功上传并且我可以存储它，它仍然显示上传错误工具提示？如何删除此工具提示？我知道有一种方法可以完全隐藏列表，showUploadList: false但我想显示上传的文件，因为有时在大上传期间，如果文件正在上传或上传，我没有任何形式的确认。

我还为它创建了代码框：https ://codesandbox.io/s/bold-bash-g3qkj

标签： reactjsantd

解决方案

如果您只想将文件保存到状态，而不是将其自动发送到服务器，则必须设置属性beforeUpload。

const fileProps = {
  name: "file",
  multiple: false,
  beforeUpload: () => {
    return false;
  },
  onChange(info) {
    if (info.file.status !== "uploading") {
      let reader = new FileReader();
      reader.readAsDataURL(info.file);
      setUploadedImage(info.file);
    }
  }
};

推荐阅读