TypeError: не удалось выполнить createObjectURL для URL-адреса: ошибка разрешения перегрузки

Question

Я пытаюсь включить функцию загрузки файлов в своем приложении React, но у меня возникла проблема. Когда я пытаюсь загрузить первое изображение, оно работает нормально. Диалоговое окно проводника закрывается, и отображается моя фотография. Перезапись изображения другим изображением из моего файлового проводника также работает.

Однако, когда я закрываю проводник при перезаписи, я получаю следующую ошибку:

TypeError: не удалось выполнить createObjectURL для URL-адреса: ошибка разрешения перегрузки.

Вот мой соответствующий код:

      showImage = (e) =>{
    this.setState({image: URL.createObjectURL(e.target.files[0])})
  }

render() {
    return (
 <div className="content">
        <input
          accept="image/*"
          className="input"
          id="icon-button-file"
          type="file"
          onChange={this.showImage}
        />
        <label htmlFor="icon-button-file">
       
          <IconButton
            className="image"
            aria-label="upload picture"
            component="span"
          >
             { this.state.image == null ? <AddAPhotoIcon className="icon" /> : 
             <img src={this.state.image} alt="test" className="picture"/> }
             </IconButton>
        </label>
</div>
)

Answer 1

Думаю, ошибка означает, что массив файлов может быть пустым. Возможно, вы захотите проверить, пуст ли массив, прежде чем обращаться к члену.

      if(e.target.files.length !== 0){
      this.setState({image: URL.createObjectURL(e.target.files[0])})
    }

Answer 2

       dataURLToBlob(dataurl) {
        let arr = dataurl.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];
        let bstr = atob(arr[1]);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    },
 showImage = (e) =>{
   this.setState({image: URL.createObjectURL(dataURLToBlob(e.target.files[0]))})
}