FileReader的用法 - Githubissues

定义

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

语法

let reader = new FileReader()

方法

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

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

事件

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

用法

//FileReader读取图片
input.addEventListener('change', function () {
      const file = this.files[0]
      const fileReader = new FileReader()
      fileReader.readAsDataURL(file)
      fileReader.addEventListener('load', function (e) {
        const { result } = e.target
        img.src = result
      })
})
// 读取文本
const file = this.files[0]
reader.readAsText(file, 'UTF-8')

上面我们使用了readAsDataURL，那么URL也有一个createObjectURL，它们之间有何异同呢？

通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串通过URL.createObjectURL(file)可以获取当前文件的一个内存URL 类似：blob:https://xxx

执行时机：
- createObjectURL是同步执行（立即的）
- FileReader.readAsDataURL是异步执行（过一段时间）
内存使用
- createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行 revokeObjectURL 来释放。
- FileReader.readAsDataURL则返回包含很多字符的base64，并会比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制）

参考

使用FileReader进行文件读取 H5拍照上传填坑汇总

gdutwyg / blog

FileReader的用法 #84

定义

语法

方法

事件

用法

参考