前端二进制文件相关概念粗览

2023-03-23 232 阅读3分钟

关键词：ArrayBuffer、blob、file、fileReader、formData...

概览

XMLHttpRequest家族图[8]

Blob、ArrayBuffer等之间的关系图

概念简介

文件

存储在外部存储介质上的，由文件名称标识的一组相关信息的集合。

文件缓冲区（fileBuffer）[1][2]

为了调节CPU与I/O设备间速度不匹配的矛盾，在内存区预留了一定的空间暂时存放读写期间的文件数据即文件缓冲区。
文件缓冲区通过磁盘缓存来实现，可减少读取硬盘的次数。
- 内存读取是电子操作，磁盘读取是I/O操作；
- 磁盘缓存本身不是实际存在的存储介质，它依托于固定磁盘，提供对主存储器存储空间的扩充，即利用主存中的存储空间来暂存从磁盘中读取/写入的信息；

二进制数组

处理二进制数据的类，用于js与显卡间的通讯

js和显卡间频繁的编码转换，效率低，所以发明二进制数组存储文件信息，通讯时就无需编码转换了

ArrayBuffer

原始二进制数据缓冲区，标识固定长度的字节序列

arrayBuffer提供给我们一个操作byte的能力
原始数据不能直接操作

视图

TypeArray视图，DataView视图都是用来读写ArrayBuffer的。

TypeArray: Int8Array()、Unit8Array()...
TypeArray简单些，DataView能力强大些；视图本身不存储数据，数据存储在底层的ArrayBuffer中

const buffer = new ArrayBuffer(12); // 生成一个12字节的连续内存，每个字节默认值为0
const viewData = new Unit8Array(buffer); // 建立Unit8Array视图

Blob

封装的不可变原始大数据，可以实现多线程间安全共享

ArrayBuffer修改了就都会变哈
Blob:url 是指向存储在浏览器缓存或者磁盘中的blob引用 // createObjectUrl(Blob)
- Blob:url 只允许GET请求，请求头设置responseType: Blob, 才能以Blob读取返回数据流; URL.createObjectURL后最好不用的时候主动销毁：revokeObjectURL
- data:url 是对内容编码放在url上；blob:url是引用，对浏览器存储在内存或磁盘中blob对象的引用；file:url是引用，是本地文件路径
- 访问磁盘的Blob接口都是异步的，可以用fileReader对象读取内容
- Blob和ArrayBuffer的联系：Blob构造函数可以接受一个ArrayBuffer作为参数生成一个Blob对象，此行为就相当于对ArrayBuffer做了一个封装，之后以整体访问Blob，可slice。// ArrayBuffer可使用视图直接操作内存；Blob只能整体访问，不可修改
```
// ArrayBuffer -> Blob
const buffer = new ArrayBuffer(16);
const blob = new Blob([buffer]);

// 使用fileReader操作blob|file
const reader = new FileReader();
reader.onload = function() {
    console.log("value: ", reader.reasult);
}
reader.readAsArrayBuffer(file);
```

base64

将不可读内容转换成可读内容，保证传输内容在各个网关间无差错传输。 // 主要作用不在于安全性

atob()解码，btoa()编码
验证码需要每次请求，为什么也转成base64?
- 保证无差错传输，防止机器识别

参考文献