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。

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

1 个答案: