在 Angular5/6 的 onload 方法之外访问文件阅读器内容？

Question

我正在尝试读取具有以下代码片段的文件。

readFile(file: File) {
    var reader = new FileReader();
    console.log(reader.readyState);
    reader.onload = () => {
        console.log(reader.result);
    };
    reader.readAsText(file);
}

正如预期的那样，console.log() 在阅读器的 onload 事件中打印文件的内容。但是，我试图从我的readFile方法中提取此输出作为返回值。

例如，

onSubmit() {
    let output = this.readFile(this.newImportForm.value.dataFile);
    console.log(output);
}

如何将文件内容作为字符串返回？我可以组合一个涉及发射事件和做一些复杂事情的解决方案，但我想探索一个更优雅的解决方案。

提前致谢 ：）

Answer 1

由于FileReader异步读取内容，因此您无法直接返回字符串。

一个更优雅的解决办法是返回一个承诺或可观察的readFile。例如

readFile(file: File): Observable<string> {
   const sub = new Subject<string>();
   var reader = new FileReader();

   reader.onload = () => {
      const content: string = reader.result as string;
      sub.next(content);
      sub.complete();
   };

   reader.readAsText(file);
   return sub.asObservable();
}

这样你就可以像这样订阅返回的 Observable

fileSelected(ev) {
    const file = ev.target.files[0];
    this.readFile(file).subscribe((output) => {
      console.log(output);
    })
  }