使用 FileReader 正确读取文件

Question

所以，我有一个 returns 文件的输入。它看起来像这样：

<div class="form-group">
    <label for="file">Choose File</label>
    <input type="file" id="file" (change)="readDocument($event)">
</div>

我要输入的文件是 csv 文件。

我的 FileReader 函数如下所示：

  readDocument(file) {
    let fileReader = new FileReader();
    fileReader.onload = (e) => {
      console.log(fileReader.result);
    }
    fileReader.readAsText(this.file);
  }

但是，当我选择文件时，returns出现以下错误：

ERROR TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.

根据此处的其他答案，我应该做的一切都是对的。我只是不知道我的问题是什么。有人有想法吗？

Answer 1

您正在阅读 this.file。但是 this.file 与传递给您的方法的更改事件中的实际文件无关。

您命名为 file 的事件不是文件。这是一个变化事件。您需要从中取出文件：

readDocument(fileChangeEvent: Event) {
  const file = (fileChangeEvent.target as HTMLInputElement).files[0];
  let fileReader = new FileReader();
  fileReader.onload = (e) => {
    console.log(fileReader.result);
  }
  fileReader.readAsText(file);
}

Answer 2

将 this.file 替换为 file。

也尝试从 target 中获取值，如下所示：

readDocument(fileChangeEvent: Event) {
  const file = (fileChangeEvent.target as HTMLInputElement).files[0];
  let fileReader = new FileReader();
  fileReader.onload = (e) => {
    console.log(fileReader.target.result);
  }
  fileReader.readAsText(file);
}

使用 FileReader 正确读取文件

Correctly read a File with FileReader

filereader

angular