Question

我遇到了一个JavaScript Filereader问题，该错误返回错误Uncaught TypeError：无法对'FileReader'执行'readAsDataURL'：参数1不是'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]);

}

Answer 1

drop事件包含DataTransfer object中的文件。因此，代替

const file = e.target.files[0]

您需要这样做：

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

处理两个事件。

这可能就是为什么某些尝试有效而有些无效的原因-您刚刚以两种不同的方式上传了文件，而只有一种有效。

FileReader错误参数1不是'Blob'类型的

1 个答案: