js对文件和二进制操纵的一些要领汇总

2023年11月23日 281次阅读 来源: noahlam

近来接办了一个项目,接触到一些对文件操纵的营业.所以在这边整顿一下一样平经常使用到的处理体式格局,当进修笔记吧,有不对的处所,迎接斧正哈

FileReader

起首我们来看一下 FileReader 这个全能的对象, 就犹如它的名字一样,就是个文件读取器,
之所以说它是个全能的对象是由于它能够读取恣意花样的内容,近来我尝试过用 FileReader 读取过 psd, ppt, 种种图片等等.
虽然许多情况下,它读出来的是我们完整看不懂的东西.不过经由过程肯定的转换,理论上我们能够在浏览器内里翻开任何文件范例.

下面抄一段 MDN 的文档

FileReader 对象许可Web应用程序异步读取存储在用户盘算机上的文件(或原始数据缓冲区)的内容,运用 File 或 Blob 对象指定要读取的文件或数据.

个中File对象能够是来自用户在一个 <input> 元素上挑选文件后返回的 FileList 对象,也能够来自拖放操纵天生的 DataTransfer 对象,还能够是来自由一个 HTMLCanvasElement 上实行 mozGetAsFile() 要领后返回结果.

由因而抄的,就不做细致解说,重点是要知道你要读的文件的编码范例,然后挪用对应的要领取读就能够了.这里有原文

由于 FileReader 能够把文件读取成种种花样,所以这里能够应用这个特征,举行编码的转换,如 ArrayBuffer, Blob对象 和 字符串, base64 之间的互相转换/单向转换, 部份范例只能单向转换,是由于 FileReader 只吸收 File 或 Blob 范例的数据(事实上 File 也 Blob 的一种),假如数据没法转换成指定范例,就没法用 FileReader 转换.

 const filereader = new FileReader();
 const blob = new Blob(['hello file-reader'], { type: 'text/plain'});

 filereader.onload = e => {

     console.log(e.target.result); // 输出 data:text/plain;base64,aGVsbG8gZmlsZS1yZWFkZXI=

 }

 filereader.readAsDataURL(blob);

网上传的用 Uint16Array 举行 String 和 ArrayBufer 互转的实在有编码长度的题目,我亲自体验过,用 FileReader 就能够避开这个题目.能够挪用它的 readAsArrayBuffer() 和 readAsText() 要领,把指定对象读取成 ArrayBuffer 花样 或 纯文本花样的数据.

固然 FileReader 不仅仅能用在编码转换上,读取种种文件才是它重要的才能,合营 <input type=”file” >、DataTransfer、Blob 等,能够把恣意花样的数据读取到浏览器内里.

Blob 对象 (Binary Large Object)

上面屡次提到 Blob 对象,私以为 Blob 也是个异常壮大的对象,所以这里我以为异常有必要引见一下,先看看 MDN 怎样说的

Blob 对象示意一个不可变、原始数据的类文件对象.Blob 示意的不肯定是JavaScript原生花样的数据.File 接口基于Blob,继续了 blob 的功用并将其扩大使其支撑用户体系上的文件.

Blob 对象有个同名组织函数,该组织函数吸收 2 个参数,第一个参数必需是个 Array 范例的,哪怕你只要一项,也必需用 [ ] 包着,如 ['hello file-reader'],
第二个参数是个可选的,是个对象,有2个选项,type 和 endings,type 指定第一个参数的 MIME-Type, endings 指定第一个参数的数据花样,其可选值有 transparent(稳定,默许) 和 native(随体系转换)

const blob = new Blob(['hello file-reader'], { type: 'text/plain'});

Blob.size 能够猎取对象中所包括数据的大小(字节), Blob.type 能够猎取对象所包括数据的MIME范例.假如范例未知,则该值为空字符串.

Blob.slice() 要领能够返回一个新的 Blob对象,包括了源 Blob对象中指定范围内的数据, 共吸收3个参数,前两个参数和 Array.slice 的参数相似

参数1：最先索引,默许为0
参数2：截取完毕索引(不包括当前值)
参数3：新Blob的MIME范例,默许为空字符串

const newBlob = blob.slice(0, 5, 'text/plain');

大文件分段上传就靠它了,合营 Blob.size 食用,口感更佳哈

经由过程 URL.createObjectURL(Blob对象), 能够把 Blob对象 转换成一个链接地点,该地点能够直接用在某些 DOM 的 src 或许 href 上, 从而完成前端下载或图片显现.
一个比较w奇异的用法是 阮先生的 web worker 教程 里的「同页面的 Web Worker」, 这个再合营动态插进去 DOM, 是否是就能够绕开 webworker 的同源战略？

上面提到 FileReader 只能吸收 Blob 花样的数据(其他花样实在也是Blob的子集), 实在 Blob 也只能经由过程 FileReader 读取.险些就是泡面跟火腿肠,最好同伴啊哈

Arraybuffer, 范例数组对象, DataView

先说说 Arraybuffer 之所以要引见它,是由于 FileReader 有个 readAsArrayBuffer() 要领,假如的被读的文件是二进制数据,那用这个要领去读应该是最合适的,读出来的数据,就是一个 Arraybuffer 对象,老例子,看看定义：

ArrayBuffer 对象用来示意通用的、牢固长度的原始二进制数据缓冲区.ArrayBuffer 不能直接操纵,而是要经由过程范例数组对象或 DataView 对象来操纵,它们会将缓冲区中的数据示意为特定的花样,并经由过程这些花样来读写缓冲区的内容.

Arraybuffer 也有个同名组织函数,用于建立一个指定长度的,内容悉数为 0 的 ArrayBuffer 对象,组织函数吸收一个参数,用来指定要建立的内容长度.如：

let ab = new ArrayBuffer(8); // 建立一个 8 字节的 ArrayBuffer

由于没法对 Arraybuffer 直接举行操纵,所以我们须要借助其他对象来操纵. 一切就有了 TypedArray(范例数组对象)和 DataView.

  1. TypedArray, TypedArray 是一类对象的统称,事实上 JS 内里并没有一个叫 TypedArray 的对象或组织函数.所以你不能直接运用 TypedArray.以下是 9 个 TypedArray 对象/组织函数
Int8Array();
Uint8Array();
Uint8ClampedArray();
Int16Array();
Uint16Array();
Int32Array();
Uint32Array();
Float32Array();
Float64Array();

详细用法请参考 MDN: TypedArray

TypedArray 虽然不是真的数组,然则有险些跟数组一样的 API,我们能够像操纵数组一样操纵 TypedArray ,所以有了 TypedArray 我们就能够把 ArrayBuffer 转换成 TypedArray,然后在举行读写操纵,到达操纵二进制的目标,下面是个例子


    let arrayBuffer = new ArrayBuffer(8);

    console.log(arrayBuffer[0]);  // undefined

    let uint8Array = new Uint8Array(arrayBuffer);

    console.log(uint8Array);  // [0, 0, 0, 0, 0, 0, 0, 0]

    uint8Array[0] = 1;
    console.log(uint8Array[0]); // 1

    console.log(uint8Array);  // [1, 0, 0, 0, 0, 0, 0, 0]

能够看出,用 arrayBuffer[0] 的体式格局直接猎取 ArrayBuffer 对象的内容是猎取不到的,而 TypedArray 能够.

直接 console.log(arrayBuffer) 在控制台是能够看到
[[Int8Array]] [[Int16Array]] [[Int32Array]] [[Uint8Array]] 4 种 TypedArray 数据,不过这应该是浏览器为了轻易开发者视察数据,而做的转换,而不是 ArrayBuffer 真的具有这些数据,毕竟对象称号看起来也不是那末正式(用
[[]] 包括)

用 arrayBuffer[0] = 1 给 ArrayBuffer 对象的某个下标赋值是不会报错的,而且稍后你能够用一样的途径掏出该值 console.log(arrayBuffer[0]) // 1, 但这并不代表你操纵了 ArrayBuffer 的数据,原理跟 给数组设置属性 雷同.

  1. DataView, DataView 供应了跟 TypedArray 相似的功用,与 TypedArray 差别的是 DataView 是一个实在存在的对象,经由过程供应种种要领来操纵不通范例的数据,直接看栗子吧.
let arrayBuffer = new ArrayBuffer(8);

    let dataView = new DataView(arrayBuffer);

    console.log(dataView.getUint8(1)); // 0

    dataView.setUint8(1, 2);
    console.log(dataView.getUint8(1)); // 2
    console.log(dataView.getUint16(1)); // 512

    dataView.setUint16(1, 255);
    console.log(dataView.getUint16(1)); // 255
    console.log(dataView.getUint8(1)); // 0

就像你看到的,我们能够在同一个数据上面,挪用差别的要领,读取/写入 差别范例(长度)的数据,然则大部份情况下,这么做会很难获得我们预期的结果.就像上面的输出,看起来彷佛不是那末的一般,这是由于 一个 16 位的二进制,用 8 位的花样来读,恰好能够读成 2 个 8 位的二进制.举个栗子


// 16 位的 1

0000 0000 0000 0001

// 用 8 位的读就变成

0000 0000  // 0

0000 0001  // 1

由于前面 8 位恰好都是 0 , 所以结果看起来除了多个 0 好像没啥区分？ 当数字比较大的时刻


// 应该是256？ 我也不太会算这个

0000 0001 0000 0001

// 用 8 位的读就变成

0000 0001  // 1

0000 0001  // 1

扯远了,我们转头看看 DataView 供应了哪些要领

// 读
DataView.prototype.getInt8()
DataView.prototype.getUint8()
DataView.prototype.getInt16()
DataView.prototype.getUint16()
DataView.prototype.getInt32()
DataView.prototype.getUint32()
DataView.prototype.getFloat32()
DataView.prototype.getFloat64()

// 写
DataView.prototype.setInt8()
DataView.prototype.setUint8()
DataView.prototype.setInt16()
DataView.prototype.setUint16()
DataView.prototype.setInt32()
DataView.prototype.setUint32()
DataView.prototype.setFloat32()
DataView.prototype.setFloat64()

跟 TypedArray 比 少了一个 Uint8ClampedArray() 详细看
MDN: DataView

atob 和 btoa

base64 这个利器,置信前端的你不会生疏吧,最经常使用的操纵能够就是图片转 base64 了吧? 在之前 要在字符串跟 base64 直接互转,我们能够须要去网上拷一个他人的要领,而且大部份情况下,你没有时候去考证这个要领是否是真的牢靠,有无 bug, 如今我们能够直接用内置的要领了

    let str = 'I am a string';

    let a = btoa(str);  // a = 'SSBhbSBhIHN0cmluZw=='

    let b = atob(a);  // b = 'I am a string'

没错,就是这么简朴,而且大部份浏览器都支撑 除了 IE9-, 详细能够参考 CanIUse: atob

btoa 要领不支撑中文和特别字符,所以保险起见,在转换之前照样 encodeURIComponent 一下吧, 固然别忘了在 atob 后,再 decodeURIComponent 返来。

jspack zipjs xml2js

末了再安利 3 个包

jspack https://github.com/pgriess/no… js操纵二进制文件, 我们的 psd 文件剖析就用到这个包.

jszip https://github.com/Stuk/jszip js操纵压缩文件, 我们的 pptx 的压缩比剖析成 xml 都靠它.

xml2js https://github.com/Leonidas-f… 把 xml 文件转换成 json, 我们的 pptx 剖析就是用它举行 pptx 的 xml 文件的转换.

广告时候

我们40人的前端团队终年招兵买马中,在厦门的和想来厦门的童鞋们,不要怜惜你的简历,用力砸过来 邮箱：atob('bnVveWFAZ2FvZGluZy5jb20='), 期待你一起来稿事

对本文有看法或许发起,请只管在 github 上提 issue, 近来比较忙,比较不怎样逛社区

    原文作者：noahlam
    原文地址: https://segmentfault.com/a/1190000018003839
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞