Angular：FileReader - 从列表中的文件中获取名称

Question

我用这个 FileReader 来读取 csvs：

readDocument(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({
            name: file.name,
            result: fileReader.result
          });
        };
        fileReader.readAsText(file);
      } 
    });

有了这个，我就可以在我的订阅中使用该文件并随时使用它的名称或值：

this.readDocument(csv).subscribe(value => {
            console.log(value.name);
            console.log(value.result
}

同时，我有这个 Filereader 用于读取其中存储有 csvs 的文件夹：

  public readFolder(files: string[]) {
    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;
    console.log(filename);
    reader.onload = (e: any) => {
      this.fileCache.push(e.target.result);

      this.readFile(index + 1, files);
    };
    reader.readAsBinaryString(file);
  }

现在，我确实得到了一个数组，其中填充了文件夹中每个 csv 的数据。然后我可以稍后使用例如循环来显示所有文件数据。

files = []
this.folderReader.readFolder(csv.target.files).subscribe(files => {
      files.forEach((value, key) => {
            console.log(key + ': ' + value);
     }
}

我的问题是，id 希望能够再次读取文件的值和名称，就像在第一个示例中一样。 最后应该是这样的：

this.folderReader.readFolder(csv.target.files).subscribe(files => {
      files.forEach((file) => {
            console.log(file.name)
            console.log(file.result)

     }
}

我正在努力修改第二个 FileReader 以在数组中提供与第一个类似的输出。我能做些什么来改进我的 FileReader 以便它提供我想要的输出？有没有更简单的方法？

Answer 1

尝试使用简单的模型类来存储文件名和内容（替换您的结果）：

class FileStorage {
   name: string;
   content: any;

   contructor(name: string, content: any) {
      this.name = name;
      this.content = content;
   }
}

您无需将内容/结果推送到缓存中，而是使用文件名和内容创建一个新对象：

  private readFile(index, files) {
     ...
     reader.onload = (e: any) => {
        this.fileCache.push(new FileStorage(fileName, e.target.result));
     ...

或者你只推送一个普通对象而不输入（比如在你的文件阅读器中）;-)

this.fileCache.push({
        name: fileName,
        content: e.target.result
      });

现在您可以通过以下方式获取数据：

  files.forEach((file) => {
        console.log(file.name)
        console.log(file.content)
 }

顺便说一句： 看看 node.js FileSystem Api，也许是处理文件的更聪明的方式。

例如：tutorialspoint Node FileSystem Examples

API 读取文件fs.readfile.