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

Question

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

我选择文件的 HTML：

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

我已经能够使用此代码 sn-p 记录文件中的值：

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

有人可以帮助我如何继续使用文件阅读器来实现这一目标吗？

在此先感谢

Answer 1

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

你可以这样做：

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

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

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>