聊聊js中的FileReader~

855 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第14天,点击查看活动详情

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

  • File
  • Blob
  • FileReader
  • ArrayBuffer
  • Base64

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

ppx2.jpg

什么是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 属性中将包含一个 字符串 以表示所读取的文件内容

666.jpg

下面来看看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(需读取总量),通过它我们就可以为用户展示出文件上传的进度了

dog.jpeg