Angular 9中如何在TypeScript中将上传的JSON文件读取为对象？

这个问题很常见——你已经成功把JSON文件读取成字符串文本了，只差最后一步把文本解析成JavaScript对象就可以啦！

核心原因 #

FileReader.readAsText() 方法的作用就是把文件内容读取为纯字符串，所以你控制台输出的是JSON格式的文本，而不是可直接操作的对象。我们需要用 JSON.parse() 方法把字符串转换成对应的JS对象。

修改后的代码实现 #

在你的onload回调里，对读取到的文本进行解析，同时建议加上try-catch捕获非法JSON的解析错误，避免程序崩溃：

this.file = event.target.files[0];
let fileReader = new FileReader();
fileReader.readAsText(this.file)
fileReader.onload = () => {
  try {
    let jsonText = fileReader.result as string;
    // 解析字符串为对象
    let jsonObj = JSON.parse(jsonText);
    console.log(jsonObj); // 现在输出的就是可操作的对象啦
    // 这里可以继续处理你的对象，比如赋值给组件变量
    // this.myData = jsonObj;
  } catch (err) {
    console.error('JSON解析失败，请确保上传的是合法的JSON文件:', err);
  }
}
fileReader.onerror = (error) => {
  console.error('文件读取错误:', error);
}

额外优化：限制仅上传JSON文件 #

为了避免用户上传非JSON文件导致的解析问题，你可以给input标签添加accept属性，只允许选择.json文件：

<button type="button" mat-raised-button (click)="fileInput.click()">Upload File</button>
<input hidden (change)="onChangeFile($event)" #fileInput type="file" id="file" accept=".json">

这样用户在选择文件时，默认只会显示JSON格式的文件，进一步降低出错概率。

内容的提问来源于stack exchange，提问作者alim1990