最近在使用angular4框架做一个项目，需要将json文件中的数据上传到服务器，这就需要先在本地解析json文件获取其中的内容，再将内容推送上去，下面是自己找到的解决办法以及遇到的一些 小坑。
一开始我觉得angular4应该有解决这个问题的一套办法，于是 我找到了一篇文章：http://www.concretepage.com/angular-2/angular-2-http-get-example#example 有兴趣自己看一下，是使用angular2的，有人说angular2跟angular4差别不是很大，于是我照着代码自己敲了一遍，最后虽然没报错，但就是得不到想要的结果，最后实在找不到原因，果断放弃，决定曲线救国，采用html5的强大File api。话不多说，附上代码：
html页面文件：
<form (ngSubmit)="onSubmit()" [formGroup]="myForm">
<div class="form-group text-left">
<label for="description">EDI</label>
<input formControlName="EDI" type="file" class="form-control" (change)="handleFileSelect($event)" >
</div>
</form>
ts文件：
myForm = new FormGroup({
EDI: new FormControl(),
});
private JsonObj;
handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var f = files[0]; //f是文件的详细信息
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (f => {
return e => {
// Render thumbnail.
this.JsonObj = JSON.parse(e.target.result);//e.target.result返回的是json文件中的详细内容
//JsonObj返回的是内容的缩略图
console.log(this.JsonObj);
};
})(f) ;
// Read in the image file as a data URL.
reader.readAsText(f);
alert( this.JsonObj); //这行代码只是测试用方便解释说明
}
上面代码为什么这么写可以参考http://www.javascripture.com/FileReader的写法，下面我说一下我遇到的小坑，首先上面的代码并不是从上到下一行一行执行的， 换句话说onload方法是在所有代码都执行完它才开始执行的，这就产生了一个问题，比如 alert( this.JsonObj); 这行代码输出的是undefined，因为当执行这行代码的时候onload方法还没执行呢，自然就是undefined，我之前遇到的问题就是如何等到onload方法执行后获取返回的json数据，第一想到的就是定义一个全局变量，但很奇怪，全局变量我拿不到，上面是我完全解决问题后的代码，在此之前我的代码是这样的： reader.onload = (function(f) => {
return function(e) => {
// Render thumbnail.
this.JsonObj = JSON.parse(e.target.result);//e.target.result返回的是json文件中的详细内容
//JsonObj返回的是内容的缩略图
console.log(this.JsonObj);
};
这与上面的代码唯一不同的就是function的写法不一样，但使用=>写法全局变量的使用是正常的，而使用function(e)的写法全局变量却获取不到，很奇怪。知道的可以留言求解答。
这是读取本地json文件这个问题我遇到的小坑，虽然没什么，希望看到这篇可以帮到你，不用像我一样解决半天，可以节省时间。