Блог

Я использую компонент загрузки antd, его задача состоит в том, чтобы просто загрузить изображение, а затем я беру это изображение и отправляю его в 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 но я хочу показать загруженный файл, так как иногда во время больших загрузок у меня нет никакого подтверждения, если файл загружается или загружается.

Я также создал codesandbox для этого: https://codesandbox.io/s/bold-bash-g3qkj

Если вы просто хотите сохранить файл в исходном состоянии, а не отправлять его автоматически на сервер, вы должны установить это свойство 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);
    }
  }
};