File、Blob、FileReader、ArrayBuffer、Base64

一、Blob

Blob全称为binary large object ，即二进制大对象。blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。Blob对象的特点：

• 不可修改
• 从Blob中读取内容的唯一方法是使用FileReader

1、创建

new Blob(array,options)

array：由ArrayBuffer、ArrayBufferView、Blob、DOMString等对象构成的，将会被放进Blob；

options：

• type：默认值为“”，表示将会被放入Blob中的数组内容的MIME类型。
• endings：默认值为“transparent"，用于指定包含行结束符\n的字符串如何被写入，不常用

MIME类型	描述
text/plain	纯文本文档
text/html	HTML文档
text/javascript	JavaScript文档
text/css	CSS文件
application/json	JSON文件
application/pdf	PDF文件
application/xml	XML文件
image/jpeg	JPEG图像
image/png	PNG图像
image/gif	GIF图像
image/svg+xml	SVG图像
audio/mpeg	MP3文件
video/mpeg	MP4文件

2、Demo演示

let blob = new Blob(['helloworld'],{type:"text/plain"});
console.log(blob);

Blob的属性

• size：Blob对象中所包含数据的大小（字节 ）；
• type：字符串，认为该Blob对象所包含的MIME类型，如果类型未知，则为空字符串。

3、Blob的分片

Blob对象内置了slice()方法用来将blob对象分片

其有三个参数

• start：设置切片的起点，默认为0，意味着从第一个字节开始；
• end：切片的结束点，默认值blob.size；
• contentType：设置blob的MIME类型。如果省略，则默认为blob的原始值。

Demo实例：

let blob1 = blob.slice(0,2,"text/plain");
console.log(blob1);

 二、ArrayBuffer

ArrayBuffer是一个特殊的数组。本身就是一个黑盒，不能直接读写所存储的数据，需要借助以下视图对象来读写。视图对象包含：

Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array、Uint8ClampedArray。

TypeArray视图和DataView视图的区别主要是字节序，前者的数组成员都是同一个数据类型，后者的数组成员可以是不同的数据类型。

1、创建buffer

let buffer = new ArrayBuffer(32);
console.log(buffer);
let u8 = new Uint8Array(buffer);
console.log(u8);
u8[0]=100;
console.log(u8);

运行结果：

 2、DataView

let buffer = new ArrayBuffer(32);
console.log(buffer);
let d8 = new DataView(buffer);
console.log(d8);
console.log(d8.getInt8(1));
//设置
d8.setInt8(1,100);
console.log(d8.getInt8(1));

运行结果：