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

我上传文件夹时使用了以下输入：

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

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

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);
    }
  });
}

readInput（fileChangeEvent:Event）{
返回新的可观测值（obs=>{
常量文件=（fileChangeEvent.target作为HTMLInputElement）。文件[0]；
如果（文件）{
const fileReader=new fileReader（）；
fileReader.onload=e=>{
下一个({
结果：fileReader.result
});
};
readAsText（文件）；
}
});
}

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

我尝试将结果添加到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);
        }
      });
    }

filearray=[]
readInput（fileChangeEvent:Event）{
返回新的可观测值（obs=>{
常量文件=（fileChangeEvent.target作为HTMLInputElement）。文件[0]；
如果（文件）{
const fileReader=new fileReader（）；
fileReader.onload=e=>{
下一个({
this.filearray.push（结果）；
});
};
readAsArrayBuffer（文件）；
}
});
}

但这导致数组为空

---

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

我建议使用npm包，如

Angular文件上传器是一个Angular 2/4/5/6文件上传器模块，具有 实时进度条、角度通用兼容性和多重 主题，其中包括拖放和更多

演示：

---

这里有一个例子，如果您想实现自己的解决方案

---

---

一个完整的示例，包含一个完整的to clone。

我建议使用npm包，如

Angular文件上传器是一个Angular 2/4/5/6文件上传器模块，具有 实时进度条、角度通用兼容性和多重 主题，其中包括拖放和更多

演示：

---

这里有一个例子，如果您想实现自己的解决方案

---

---

一个完整的示例，包含一个要克隆的完整示例。

您正在上载一个文件夹，并且只能访问该文件夹中的一个文件（

文件[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);
  }

---

演示：

您正在上载一个文件夹，并且只能访问该文件夹中的一个文件（

文件[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);
  }

---

演示：

这似乎是一个可能的解决方案，但我有两个错误，我在这里不理解。每次使用文件时：类型“EventTarget”上不存在属性“files”。在e.target.result:类型“EventTarget”上不存在属性“result”。我仍然收到类似的错误。尝试在chart.component.ts中复制它。如果您忘记声明一些变量，它将在这里工作：谢谢！但我仍然感到困惑的是，readInput现在是否返回了一些内容？或者我怎样才能订阅数据？当尝试这样的操作时。readInput（data）。subscribe将不起作用，因为“类型'void'上不存在属性'subscribe'”。我在选择文件夹后尝试访问数据。它是否返回数组，或者我如何使用它？这似乎是一个可能的解决方案，但我有两个错误，我在这里不理解。每次使用文件时：类型“EventTarget”上不存在属性“files”。在e.target.result:类型“EventTarget”上不存在属性“result”。我仍然收到类似的错误。尝试在chart.component.ts中复制它。如果您忘记声明一些变量，它将在这里工作：谢谢！但我仍然感到困惑的是，readInput现在是否返回了一些内容？或者我怎样才能订阅数据？当尝试这样的操作时。readInput（data）。subscribe将不起作用，因为“类型'void'上不存在属性'subscribe'”。我在选择文件夹后尝试访问数据。它是否返回数组，或者如何使用它？