FileReader 错误参数 1 不是“Blob”类型答案

【问题标题】：FileReader error parameter 1 is not of type 'Blob'FileReader 错误参数 1 不是“Blob”类型
【发布时间】：2018-11-23 18:14:11
【问题描述】：

我遇到了一个 javascript Filereader 的问题，它返回错误 Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'。二分之一。有时它可以工作，但是当我重复操作时，它会失败。

HTML 代码：

 <div className="draggable-container">
      <input
      type="file"
      id="file-browser-input"
      name="file-browser-input"
      ref={input => this.fileInput = input}
      onDragOver={(e) => {
      e.preventDefault();
      e.stopPropagation();
      }}
      onDrop={this
      .onFileLoad
      .bind(this)}
      onChange={this
      .onFileLoad
      .bind(this)}/>

JavaScript 代码：

 onFileLoad(e){
const file = e.target.files[0];
let fileReader = new FileReader()
fileReader.onload = () =>{
  console.log('IMAGE LOADED : ', fileReader.result)
  const files = {
    name: file.name,
    size: file.size,
    type: file.type,
    data: fileReader.result,
    isUploading: false
  }

  this.addLoadedFile(files);
}

fileReader.onabort = () =>{
  alert('reading aborted');
}

fileReader.onerror = () =>{
  alert('reading ERROR');
}


-> Error -> fileReader.readAsDataURL(e.target.files[0]);

}

【问题讨论】：

好吧，您可以通过简单地检查是否定义了e.target.files 来避免错误。 if (e.target.files && e.target.files[0]) {fileReader.readAsDataURL(e.target.files[0]);}

标签： javascript node.js reactjs

【解决方案1】：

drop 事件包含DataTransfer object 中的文件。所以，而不是

const file = e.target.files[0]

你需要做的：

const file = e.target.files[0] || e.dataTransfer.files[0]

处理这两个事件。

这可能就是为什么有些尝试成功而有些失败的原因 - 您刚刚通过 2 种不同的方式上传文件，但只有一种有效。

【讨论】：