Javascript TypeError:未能对“URL”执行“createObjectURL”：重载解析失败

我正在尝试在我的React应用程序中使用文件上载功能，但遇到了一个问题。当我尝试上传第一张图片时，效果很好。“文件资源管理器”对话框关闭并显示“我的图片”。用“我的文件资源管理器”中的另一张图片覆盖图片也可以

但是，当我在覆盖时取消文件资源管理器时，会出现以下错误：

TypeError:未能对“URL”执行“createObjectURL”：重载解析失败

这是我的相关代码：

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>
)

---

我认为这个错误意味着文件数组可能是空的。在访问成员之前，您可能需要检查数组是否为空

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

---

我认为这个错误意味着文件数组可能是空的。在访问成员之前，您可能需要检查数组是否为空

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