正在将所选文件解析为 Angular 中的数组

Question

我正在尝试将 selected 文件解析为 Angular 7 中的对象数组。

HTML 其中我 select 文件：

<div class="form-group" *ngIf="import">
  <label for="file">Choose backup file</label>
  <input type="file" id="file" (change)="handleFileInput($event.target.files)">
</div>

我已经能够使用以下代码片段记录文件中的值：

fileToUpload: File = null;
handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
    this.parseFile();
}

parseFile() {
  const fileReader = new FileReader();

  fileReader.onload = (e) => {
    console.log(fileReader.result);
  }

  fileReader.readAsText(this.fileToUpload);
}

该文件始终是 json 包含对象数组的文件，如下所示：

[
    {"Test": "ValueA", "Value": "SomeStringA"},
    {"Test": "ValueB", "Value": "SomeStringB"},
    ...
]

我的目标是将以下对象反序列化为对象数组 ObjectA[]：

export interface ObjectA {
    Test: string;
    Value: string;
}

有人可以帮助我如何继续使用 filereader 来实现这个目标吗？

非常感谢

Answer 1

JSON.parse() 接受一个字符串，解析它并 returns 一个对象。您可以使用它来解析您的文件。

你可以这样做：

async parseFile(): Promise<ObjectA[]> {
    const fileReader = new FileReader();

    return new Promise<ObjectA[]>((resolve) => {
        fileReader.onload = (e) => {
            resolve(JSON.parse(fileReader.result));
        }

        fileReader.readAsText(this.fileToUpload);
    });
}

当然，我的解决方案缺少错误处理，但您明白了要点。下面是演示我的解决方案的工作代码片段（减去类型转换）。

async function uploadFiles(files)  {
  for(const file of files) {
      const parsedObject = await parse(file);
      // Do stuff with your object
  }
}

async function parse(file) {
    const fileReader = new FileReader();

    return new Promise((resolve) => {
        fileReader.onload = (e) => {
            resolve(JSON.parse(fileReader.result));
        }

        fileReader.readAsText(file);
    });
}

<div>
    <input type="file" onchange="uploadFiles(this.files)" />
</div>

正在将所选文件解析为 Angular 中的数组

Parsing selected file to array in Angular

filereader

deserialization

typescript

angular