JavaScript中的二进制对象

JavaScript中用于表示二进制对象有，Blob对象、和 ArrayBuffer 对象。其中 Blob 对象表示一个不可变、原始数据的类文件对象。可以理解为磁盘上储存的原始文件对象，它可以是储存的二进制文件格式，也有可能经过编码的文本格式对象。ArrayBuffer 表示通用的、固定长度的原始二进制数据缓冲区，是一个字节数组。

1、Blob对象的类型

Blob 表示的不一定是JavaScript原生格式的数据，其中 File 就接口基于Blob，继承了 blob 的功能。File 对象可以是<input> 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。File 对象是特殊类型的 Blob。

2、创建 Blob 对象

Blob() 构造函数返回一个新的 Blob 对象。

var blob = new Blob( array, options );

array 参数是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 对象，DOMStrings会被编码为UTF-8。

options 对象中type属性表示MIME类型，endings用于指定包含行结束符\n的字符串如何被写入。默认值为"transparent"。

从 ArrayBufferView 创建Blob对象

let ab = new ArrayBuffer(32);
let int8 = new Int8Array(ab);
let blob = new Blob(int8, {type: 'application/octet-stream'}); //Blob { size: 32, type: "application/octet-stream" }

从 DOMString 创建 Blob对象

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'}); //Blob { size: 22, type: "application/json" }

从已有的 Blob对象中创建

var blob = instanceOfBlob.slice([start [, end [, contentType]]]};

3、从 Blob 对象中提取数据

使用 FileReader API，还是使用上述示例：

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
let fileRead = new FileReader();
fileRead.readAsText(blob);
fileRead.result //"{"hello": "world" }"

使用 Response 对象：

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
let res = new Response(blob).text().then(res => console.log(res)); //"{"hello": "world" }"注意 text() 方法返回的是promise对象。

直接使用Blob对象的方法

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
blob.text().then(res => console.log(res));

VM2171:1 {
"hello": "world"
}

4、URL.createObjectURL()

创建一个 DOMString，表示指定的File对象或Blob对象。

5、总结

Blob 对象的创建可以使用 Blob 构造函数从已有的ArrayBuffer, ArrayBufferView, Blob, DOMString 对象创建。不过最常见是从<input> 元素上选择文件后返回的 FileList 对象。

Blob 对象提供了转换为其他对象的方法：（因为不知道用户打开的文件具体类型，能否正确显示取决于调用对应的方法与具体Blob类型相对应）

Blob.stream()返回一个能读取blob内容的 ReadableStream；

Blob.text()返回一个promise且包含blob所有内容的UTF-8格式的 USVString；

Blob.arrayBuffer()返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer；

FileReader 对象使用 File 或 Blob 对象指定要读取的文件或数据，同样提供了多种转换类型的方法，

FileReader.readAsArrayBuffer() 读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.

FileReader.readAsBinaryString() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。

FileReader.readAsDataURL()开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。

FileReader.readAsText()开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

Response 对象同样提供了多种读取数据的方法。

Response.text() 返回文本内容；

Response.arrayBuffer() 返回ArrayBuffer 数据对象；

 

参考链接：

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

https://developer.mozilla.org/zh-CN/docs/Web/API/File

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader