Angular：FileReader - 阅读器执行太多次答案

【问题标题】：Angular: FileReader - reader executes too many timesAngular：FileReader - 阅读器执行太多次
【发布时间】：2019-10-01 14:09:59
【问题描述】：

我有这个 FileReader 可以读取文件夹：

private fileCache: any[];
  private folderReader$: Subject<any[]> = new Subject();

  public readFolder(files: any[]) {
    this.fileCache = [];
    this.readFile(0, files);
    return this.folderReader$.asObservable();
  }

  private readFile(index, files) {
    const reader = new FileReader();
    if (index >= files.length) {
      this.folderReader$.next(this.fileCache);
      return;
    }
    const file = files[index];
    const filename = file.name;
    reader.onload = (e: any) => {
      this.fileCache.push({
        name: filename,
        content: e.target.result});
      this.readFile(index+ 1, files);
    };

    reader.readAsText(file);
  }
}

现在奇怪的是，每当我选择第二个输入时，它都会运行多次。如果我只选择一个输入，一切都很好......

例如当使用这个时：

this.folderReader.readFolder(data.target.files).subscribe(files => {
    console.log(test);
}

两次输入后，控制台会显示三遍测试：

test
test
test

就像我在这里看到的：File reader execute multiple times in javascript 这可能是 onload 运行多次的问题，所以我尝试删除这一行：

  this.readFile(index+ 1, files);

这样整个功能就不会重新开始... 然而，在那之后，它根本就不起作用了，因为它可能需要index+1，这样它才能处理我认为的所有文件。

我在这里做错了什么？为什么 FileReader 会多次执行自身而不是每次输入一次？

【问题讨论】：

“一个和两个输入”有什么区别？你调用这个函数两次？请在您的代码中提供一个最小的Stackblitz 以重现您的问题。它更容易调试。
我做了这个 Stackblitz:stackblitz.com/edit/angular-hv8d2s 来重现错误：如果你选择一个文件夹，它会在控制台中显示所有文件名。如果您选择一个附加文件夹，它将显示第一个文件夹的名称两次而不是一个，如果您选择两个附加文件夹，它将显示第三个文件夹的文件名三次而不是一个，我不知道为什么跨度>

标签： javascript angular filereader

【解决方案1】：

这是你处理主题的方式。

一种解决方法是在 readFolder 调用中重新初始化您的主题，例如：

  public readFolder(files: any[]) {
    this.folderReader$ = new Subject();
    this.fileCache = [];
    this.readFile(0, files);
    return this.folderReader$.asObservable();
  }

但更好的方法是使用另一个主题，例如 rxjs 中的 BehaviorSubject。

看看Understanding rxjs BehaviorSubject, ReplaySubject and AsyncSubject

【讨论】：