对 FileReader 的理解

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 对象读取文件内容并进行相应处理。这在处理上传文件、预览图片等场景中非常有用。