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

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]

处理这两个事件。

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