Vue中图片，文档资源上传中FileReader的使用

使用场景：在vue项目中使用el-upload上传图片资源，文档或者excel时，需要读取文件，并将其转化为需要使用的文件格式，这就需要用到FileReader。

1.判断浏览器是否支持FileReader

if(window.FileReader) {
    var fr = new FileReader();
    // add your code here
}
else {
    alert("Not supported by your browser!");
}

2.调用FileReader对象的方法

abort ： 中断读取

readAsText:该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容

readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。

readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

3.FileReader读取时的钩子

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

通常来说在文件读取完毕后，在onload中将文件转为所需格式