聊聊js中的FileReader～

再来回顾一下js中用于处理二进制数据的方式

• File
• Blob
• FileReader
• ArrayBuffer
• Base64

本篇文章就准好好聊聊 FileReader，废话不多说，开搞！

什么是FileReader

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

FileReader 仅用于以安全的方式从用户（远程）系统读取文件内容，它不能用于从文件系统中按路径名简单地读取文件。要在 JavaScript 中按路径名读取文件，应使用标准 Ajax 解决方案进行服务器端文件读取，如果读取跨域，则使用 CORS 权限

如何使用

使用 FileReader构造函数 来创建一个FileReader对象：const reader = new FileReader()

这个对象常用属性如下：

• error：表示在读取文件时发生的错误
• result：文件内容,该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。
• readyState：表示FileReader状态的数字

下面来看看FileReader对象提供了哪些方法来加载文件：

• readAsArrayBuffer()：读取指定 Blob 中的内容，完成之后，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象
• readAsBinaryString()：读取指定 Blob 中的内容，完成之后，result 属性中将包含所读取文件的 原始二进制数据
• readAsDataURL()：读取指定 Blob 中的内容，完成之后，result 属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容
• readAsText()：读取指定 Blob 中的内容，完成之后，result 属性中将包含一个 字符串 以表示所读取的文件内容

下面来看看reader对象上面常见的事件

• abort：该事件在读取操作被 中断时 触发
• error：该事件在读取操作 发生错误时 触发
• load：该事件在读取 操作完成时 触发
• progress：该事件在读取时触发

这里特别讲下 progress,当读取大文件时，可以通过 progress 事件来监控文件的读取进度：

const reader = new FileReader()

reader.onprogress = (e) => {
  if (e.loaded && e.total) {
    const percent = (e.loaded / e.total) * 100;
    console.log(`上传进度: ${Math.round(percent)} %`);
  }
});

可以看到progress 事件提供了两个属性：loaded（已读取量）和total（需读取总量）,通过它我们就可以为用户展示出文件读取的进度了