1、文档
FileReader - Web API 接口参考 | MDN
2、概念
FileReader 对象是一个内置的 JavaScript 对象，用于在客户端（浏览器）中异步读取文件内容。
它提供了一种在 Web 应用程序中读取文件数据的方式，可以读取文件内容并将其转换为字符串或数据 URL。
主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。
可以使用 File 对象或者 Blob 对象来指定所要处理的文件或数据。
3、方法
① abort()
终止文件读取操作
② readAsArrayBuffer(file)
异步按字节读取文件内容，结果用 ArrayBuffer 对象表示。适用于处理二进制数据
ArrayBuffer 对象：简单理解为存放了一段二进制数据的内存空间
readAsArrayBuffer 读取文件后，会在内存中创建一个 ArrayBuffer 对象（二进制缓冲区），将二进制数据存放在其中。通过此方式，我们可以直接在网络中传输二进制内容。
③ readAsBinaryString(file)
异步按字节读取文件内容，结果为文件的二进制串
④ readAsDataURL(file)
异步读取文件内容，结果用 data:url 的字符串形式表示。
以 Data URL 形式读取文件内容，返回一个包含文件内容的 Base64 字符串。
⑤ readAsText(file,encoding)
异步按字符读取文件内容，结果用字符串形式表示。
以文本形式读取文件内容。可以通过传入第二个参数指定编码方式。
4、事件
5、创建 FileReader 实例
var reader = new FileReader();FileReader 通过异步的方式读取文件内容，结果均是通过事件回调获取。
// 解析数据
function fileParse(file, type = 'base64') {
return new Promise((resolve) => {
const fileReader = new FileReader()
if (type === 'base64') {
fileReader.readAsDataURL(file)
} else if (type === 'buffer') {
fileReader.readAsArrayBuffer(file)
}
fileReader.onload = (e) => {
resolve(e.target.result)
}
})
}
6、应用场景
使用 FileReader 对象可以实现文件的异步读取操作。
通常与 input 元素的 type 属性设置为 "file" 的文件输入框结合使用，用户选择文件后，通过 FileReader 对象读取文件内容并进行相应处理。这在处理上传文件、预览图片等场景中非常有用。
