角度:FileReader-从列表中获取文件名

我使用此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,以便提供我想要的输出?有没有更简单的方法?

零脑

尝试使用一个简单的模型类来存储文件名和内容(替换结果):

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节点文件系统示例

API Readfile fs.readfile

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从“多重输入”中的FileReader函数获取文件名?

来自分类Dev

如何从Javascript FileReader获取文件名?

来自分类Dev

从FileReader对象获取文件名

来自分类Dev

如何以角度4获取上传文件的文件名,修改日期?

来自分类Dev

如何从Sky Drive获取文件名并显示在列表中

来自分类Dev

Python获取列表中的所有文件名

来自分类Dev

如何从Sky Drive获取文件名并显示在列表中

来自分类Dev

如何从提到的列表中获取文件名

来自分类Dev

从文件名中删除单词列表

来自分类Dev

Python,字符串切片(从文件位置列表中获取文件名)

来自分类Dev

Linq根据文件名C#通过升序从目录中获取文件列表

来自分类Dev

获取目录路径中的文件名

来自分类Dev

在Dynamics Ax中获取文件名

来自分类Dev

获取特征中的类文件名

来自分类Dev

在javascript中获取文件名

来自分类Dev

在JavaScript中获取文件名

来自分类Dev

从HTTP帖子中获取文件名

来自分类Dev

从PHP中的URL获取文件名

来自分类Dev

在Erlang中从IoDevice获取文件名

来自分类Dev

从Bash中的目录获取文件名

来自分类Dev

获取目录中的文件名

来自分类Dev

在 openfiledialog 中获取文件名

来自分类Dev

在F#中:如何获取目录中文件名的列表;预期单位有字串

来自分类Dev

在 JavaScript 中为动态文件输入获取 FileReader 结果

来自分类Dev

获取FileReader()的结果对象

来自分类Dev

获取文件名并添加到列表

来自分类Dev

FileReader 找不到文件

来自分类Dev

使用 FileReader 加密文件

来自分类Dev

FileReader; 选择文件扩展名