FileReader

一，前言

1.FileReader用于解析File对象或Blob对象，获取文件数据。

二，FileReader声明

1.let fileReader = new FileReader()

三，解析文件数据

1.FileReader提供了4个api用于将不同文件数据解析出来

（1）readAsDataURL：将文件数据使用base-64进行编码，可以应用于图片预览的场景

//base-64编码由data字串开始，后面跟随的是MIME type，
//然后再加上base64字串，逗号之后就是编码过的图像文件的内容

let fileReader = new FileReader()
fileReader.readAsDataURL(file) //解析File对象或者Blob对象

//onload会在解析成功后执行
fileReader.onload= function () {
   console.log(fileReader.result)
   //data:image/png;base64,iVBORw0KGgoAAA....
 };

（2）readAsArrayBuffer：将文件解析为 ArrayBuffer 对象

（3）readAsText：按字符读取文件内容，结果用字符串形式表示，可以用于解析json文件

var reader = new FileReader();
reader.readAsText(result);

//onloadend 无论成功，失败或取消 都会执行，因此要进行判断
reader.onloadend = function (evt) {
   if (evt.target.readyState == FileReader.DONE) {
   console.log(evt.target.result)
}
};

（4）readAsBinaryString：读取文件原始二进制格式，该特性是非标准的，请尽量不要在生产环境中使用它！

四，监听事件

1.FileReader有一系列事件用于监听文件解析的整个过程

（1）onloadstart 当读取操作开始时调用
（2）onprogress 在读取数据过程中周期性调用
（3）onabort 当读取操作被中止时调用
（4）onerror 当读取操作发生错误时调用
（5）onload 当读取操作成功完成时调用
（6）onloadend 当读取操作完成时调用，无论成功，失败或取消