Angular：FileReader - 将文件夹输入中的文件存储在数组中

Question

我上传文件夹时使用了这个输入：

<div class="form-group">
        <input type="file" id="file" (change)="readInput($event)" webkitdirectory directory multiple >
</div>

该文件夹包含许多不同的 csv 文件。为了处理输入，我有这个 Filereader。

readInput(fileChangeEvent: Event) {
return new Observable<any>(obs => {
    const file = (fileChangeEvent.target as HTMLInputElement).files[0];
    if (file) {
      const fileReader = new FileReader();
      fileReader.onload = e => {
        obs.next({
          result: fileReader.result
        });
      };
      fileReader.readAsText(file);
    }
  });
}

现在，我的 Filereader 的 Observable 似乎 return 文件夹中随机文件的内容。我想做的是将不同的文件内容保存在一个数组中，以便我稍后可以在代码中访问它们。

我尝试的是将结果添加到 observable 中的数组：

filearray = []

    readInput(fileChangeEvent: Event) {
    return new Observable<any>(obs => {
        const file = (fileChangeEvent.target as HTMLInputElement).files[0];
        if (file) {
          const fileReader = new FileReader();
          fileReader.onload = e => {
            obs.next({
                 this.filearray.push(result);
            });
          };
          fileReader.readAsArrayBuffer(file);
        }
      });
    }

但这导致数组为空。

如何将文件保存在数组中？有没有比 FileReader 更容易处理文件夹输入的方法？

Answer 1

我建议使用像 angular-file-uploader

这样的 npm 包

Angular file uploader is an Angular 2/4/5/6 file uploader module with Real-Time Progress Bar, Angular Universal Compatibility and multiple themes which includes Drag and Drop and much more.

演示：https://kzrfaisal.github.io/#/afu

这里有一个例子How to handle folder uploads in Angular，如果你想实现你自己的解决方案。

要克隆一个完整示例 Creating a File Upload Component in Angular with a complete github repo。

Answer 2

您正在上传一个文件夹，并且只能访问该文件夹中的一个文件 (file[0])。

如果你需要读取所有的文件，你可以这样尝试：

readInput(fileChangeEvent: Event) {
   this.readFile(0, files);
}

private readFile(index, files) {
    const reader = new FileReader();
    if (index >= files.length ) {
      console.log(this.files);
      obs.next({result: this.files});
      return;
    }
    const file = files[index];
    reader.onload = (e: any) => {
      const bin = e.target.result;
      this.files.push(e.target.result);
      this.readFile(index + 1, files);
    };
      reader.readAsBinaryString(file);
  }

演示：https://codesandbox.io/embed/angular-joe2p

Angular：FileReader - 将文件夹输入中的文件存储在数组中

Angular: FileReader - Store Files from Folder-Input in Array

filereader

angular