FileReader文件读取和图片预览

FileReader是什么

FileReader对象允许Web应用程序异步读取存储在用于计算机上的文件(或原始数据缓冲区)的内容，使用File或Blob对象指定要读取的文件或数据

其中File对象可以是来自用户在一个input元素上选择文件后返回的FileList对象，也可以来自拖放操作生成的DataTransfer对象，还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果

构造函数

FileReader()返回一个新构造的FileReader

构造FileReader对象

let reader = new FileReader()

方法

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	终端读取操作

事件处理程序

事件	调用时机
onabort	当读取操作被中止时调用
onerror	当读取操作发生错误时调用
onload	当读取操作完成时调用
onloadend	当读取操作完成时调用，不管是成功还是失败，该处理程序在onload或者onerror之后调用
onloadstart	当读取操作将要开始之前调用
onprogress	在读取数据过程中周期性调用

读取文本

对于type=“file”的input元素，用户选择文件上传后会生成一个FileList对象

可以获取文件名，修改时间，大小和文件类型等信息，文件内容也是包含在里面的，不过需要FileReader的读取文件方法才能获取，对于纯文本，使用readAsText方法

//FileReader读取文件内容
var reader = new FileReader()
reader.readAsText(file[0], 'UTF-8')
reader.onload = function (e) => {
    // urlData就是对应的文件内容
    var urlData = this.result
}

图片预览

FileReader的另一个文件读取方法readAsDataURL，可以将图片文件转换为base64编码