Question

我有一个文件data.json，我想在我的angular 2应用程序中导入。我正在获取带有HTML输入标签的文件。

<input type="file" (change)="onImport($event)"/>

在我的typescript文件中我想读取这个data.json文件并将文件内容存储在JSON数组中。我已经搜索过，但找不到任何方法来阅读文件或任何可以帮助我的库。

Answer 1

使用FileReader和File API中的JSON.parse() method，如：

  onImport(event) {
    var file = event.srcElement.files[0];
    if (file) {
        var reader = new FileReader();
        reader.readAsText(file, "UTF-8");
        reader.onload = function (evt) {
            console.log(JSON.parse(evt.target.result));
        }
        reader.onerror = function (evt) {
            console.log('error reading file');
        }
    }
  }

Answer 2

我尝试应用@Stanislav解决方案，但遇到了一些问题。最终，以下代码成功了

参考：get the value from a FileReader in Angular 2

html代码

<input (change)=readJson($event);" type="file" />

component.ts代码

readJson(event) { var file = event.srcElement.files[0]; if (file) { var reader = new FileReader(); reader.readAsText(file, "UTF-8"); reader.onload = function (evt) { console.log(JSON.parse(evt.target["result"])); } reader.onerror = function (evt) { console.log('error reading file'); } } }

event.target["result"]是我修改的部分。

在角度2应用程序中读取JSON文件

2 个答案: