FileReader onload 函数未触发

Question

为了总结我的问题，我需要从 android 设备读取一个 csv 文件。我目前使用 JavaScript 的 FileReader。我的代码是一个月前编写的并且可以运行，但是当我回来检查功能时，我发现我的 onload 函数甚至没有触发。

在控制台日志中，我可以看到我的对象加载了 onload 中的函数，文件及其内容也被读取。我将在下面附上我的代码中的一些片段。

readCSVFile(input: HTMLInputElement) {

    var content = this.csvContent;
    const files = input.files;
    console.log("files: ", files);

    if (files && files.length) {

      const fileToRead = files[0];
      console.log("step1");
      var fileReader = new FileReader();

      console.log("state 1: ", fileReader.readyState); //prints undefined, but should have been "0"

      fileReader.onload = this.onFileLoad.bind(this);
      console.log("fileReader: ", fileReader);
      fileReader.readAsText(fileToRead, "UTF-8");
      console.log("fileReader 2: ", fileReader.onload);
      console.log("state 3: ", fileReader.readyState);
   }
}

我认为 'onFileLoad' 文件不相关，但它的第一行是 console.log("something")，我在控制台中看不到它。以下是控制台的一些输出：

fileReader 2:  ƒ (fileLoadedEvent) {
        console.log("step2");
        var textFromFileLoaded = fileLoadedEvent.target.result;
        this.csvContent = textFromFileLoaded;
        console.log("Continut: ", t…

state 1:  undefined

Answer 1

不关闭也可以试试。 IE： fileReader.onload = function(ev){ //这是你的代码 }.bind(this);

Answer 2

假设 FileReader.toString() 的输出是

"function () {
  this._readyState = 0;
  this._error = null;
  this._result = null;
  this._progress = null;
  this._localURL = '';
  this._realReader = origFileReader ? new origFileReader() : {}; // eslint-disable-line new-cap
}"

这意味着您不是在处理 web-API 的 FileReader，而是在处理某种包装对象。

因为它覆盖了原来的名称 space 而没有原来的行为，在你的位置我会简单地去掉任何设置这个包装器的东西。不过，如果你真的想保留这个 ~~crap~~，它的 ._realReader 属性似乎将是一个真正的 FileReader，你可以与之正常交互。

FileReader onload 函数未触发

FileReader onload function is not firing

javascript

filereader

typescript