js前端FileReader读取文件

HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。FileReader的使用方式非常简单分为三个步骤:

1.创建FileReader对象 2.读取文件 3.处理文件读取事件(完成,中断,错误等...)

1.创建FileReader对象

 let reader = new FileReader();

2.读取文件

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名	参数	描述
abort	无	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [文件编码]	将文件读取为文本

//1.将文件读取为二进制数据
reader.readAsBinaryString(file);
//2.将文件读取为文本数据
reader.readAsText(file,"UTF-8")

3.读取事件

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

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

4.完整读取示例

       //1.获取文件对象
         let file = data.file;
         //2.创建FileReader对象,用于读取文件
         let reader = new FileReader();
         //3.将文件读取为二进制码
         reader.readAsBinaryString(file);
         //4.处理读取事件
         //4.1读取完成事件,获取数据
         reader.onload = (e) => {
            //获取数据
            const data = e.currentTarget.result;
         };
         //4.2 //读取中断事件
         reader.onabort = () => {
            console.log('读取中断了');
         };