江苏龙网

  1. 主页 > 生活百科 > >

浅谈JS处理文件数据的API：Blob、FileReader、Base64、File？

JS

在前端开发中 ， 开发者常常会使用文件上传、下载或数据转换的操作 。JAVAScript 提供了许多 API 来处理二进制数据和转换数据流 ， 如：ArrayBuffer、FileReader、base64 、Blob、File等 ， 他们之间的转换与联系如下所示 。

浅谈JS处理文件数据的API：Blob、FileReader、Base64、File？

文章插图
 
BlobBlob (binary large object)  ， 即二进制大对象 ， 表示一个不可变、原始数据的类文件对象 。它的数据可以按文本或二进制的格式进行读取,在 web 网页中的充当数据流使用的相当频繁 。
blob 对象上有两个属性：
  • size：Blob对象中所包含数据的大小（字节）；
  • type：字符串 ， 认为该Blob对象所包含的 MIME 类型 。如果类型未知 ， 则为空字符串 。
 
let blob = new Blob([1,2,3,4,5], {type: "text/plAIn"});// 可以 进行分割切片 ， 如下const _subBlob = blob.slice(0, 3 ， {type: "text/plain"});// 此时切片的type 默认可以省略URL.createObjectURL(blob);//12345URL.createObjectURL(_subBlob);// 123 
注意： 如果Blob的数据属于Unicode 编码中的 Supplementary Plane（辅助平面） 字符 ， 也即是需要用两个 16 位的 UTF-16 编码单元（称为代理对或代理字符）来表示 ， 那么转成的createObjectURL 链接不能获取正确数据,获得的是乱码 ， 此时可以使用FileReader进行获取特定编码格式的数据 ， 如下：
let blob = new Blob(['！@#￥%']);const _subBlob_o = blob.slice(0, 1);const _subBlob_t = blob.slice(0, 2);const _subBlob_th = blob.slice(0, 3);URL.createObjectURL(_subBlob_o);// ?URL.createObjectURL(_subBlob_t);// 锛URL.createObjectURL(_subBlob_th);// 锛?// 以下使用 FileReader 获取UTF-8类型的text文本数据let blob = new Blob(['！￥%&*']);let _subBlob_o = blob.slice(0,3);let _subBlob_t = blob.slice(3,6);let _subBlob_th = blob.slice(6,7);let _subBlob_f = blob.slice(7,8);let fileReader = new FileReader();fileReader.onload = function(event) {let result = event.target.result;console.log(result); // 这里打印出读取的数据 ， 应该正确显示UTF-8编码的字节字符};// fileReader.readAsText(blob, 'UTF-8');// output:！（中文叹号占用三个字节）// fileReader.readAsText(_subBlob_o, 'UTF-8');// output:￥（中文$占用三个字节）// fileReader.readAsText(_subBlob_t, 'UTF-8');// output:%// fileReader.readAsText(_subBlob_th, 'UTF-8');// output:&File文件（File）Api 是一种用来描述有关文件信息的对象类型 ， File 对象本质上是继承了 Blob 的一种封装之后的对象 (包含 文件size、文件name和文件type)。
File.__proto__ === Blob// true在web应用中可以通过 type为file的input标签选择文件后生成的 FileList 对象（这里获取的是File的一个数组） ， 也可以通过拖拽文件生成 DataTransfer 对象得到Filelist（通过 DataTransfer.files 获取） 。
File 对象都包含文件对象的一些属性 ， 这些属性都继承自 Blob 对象,根据MDN的解释如下：
  • lastModified：引用文件最后修改日期 ， 为自1970年1月1日0:00以来的毫秒数；
  • lastModifiedDate：引用文件的最后修改日期；
  • name：引用文件的文件名；
  • size：引用文件的文件大小；
  • type：文件的媒体类型（MIME）；
  • webkitRelativePath：文件的路径或 URL 。
FileReaderFileReader 是一个在 JavaScript 中可以用来读取文件内容的 API ， 它允许您读取 Blob 或 File 对象中的数据 ， 并将其转换为其他格式 ， 比如文本、二进制数据或数据 URL 。
注意：FileReader 和 一些Blob、File操作 ， 只能读取文件不能修改文件 ， 若想要直接写入文件可以使用 a 标签 ， 指定转成的文本 ， 进行download,或者可以尝试一下Chrome的实验性的
window.chooseFileSystemEntries这个api获取文件句柄操作（正式稳定版新版或没有这个Api ， 了解即可）
  • downloadLink
const blob = new Blob(['{"name": "tong"}']);const _link = document.createElement("a");_link.download = 'e.json';_link.href = https://www.isolves.com/it/cxkf/yy/js/2023-08-03/URL.createObjectURL(blob);_link.click();
  • chooseFileSystemEntries
// 文件句柄let handle;button.addEventListener('click', async (e) => {handle = await window.chooseFileSystemEntries();});


推荐阅读


上一篇：Rust中的高吞吐量流处理

下一篇：Spring容器原始Bean是如何创建的？