JS的Blob对象整理1. Blob（Baniry Large Object）表示一个不可变、原始数据的类文件对象创

绘图1.png

1. Blob（Baniry Large Object）

表示一个不可变、原始数据的类文件对象

创建

new Blob(array, options)
- array：一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMString 会被编码为 UTF-8
- options：可选，包含以下两个属性
  - type：MIME类型，默认""，MIME参见链接
  - endings：指定包含行结束符\n的字符串如何被写入，取值transparent（默认值，结束符不会改变）和native（结束符会被更改为适合宿主操作系统文件系统的换行符）

属性

size：只读，返回Blob对象的字节大小
type：只读，返回Blob对象的MIME类型

方法

text()：返回Promise，其包含Blob所有内容的UTF-8格式的字符串
arrayBuffer()：返回Promise，其包含Blob所有内容的二进制格式的ArrayBuffer
slice(start, end, contentType)：返回一个原Blob指定范围的子集的新Blob对象
stream()：返回能读取Blob内容的ReadableStream

2. File

继承自Blob，是特殊的Blob，通常用于<input type="file" />的文件获取

创建

new File(bits, name, options)
- bits：一个包含ArrayBuffer，ArrayBufferView，Blob或者DOMString对象的数组，或者任何这些对象的组合
- name：文件名称或文件路径
- options：可选，文件的属性
  - type：MIME类型，默认""
  - lastModified：数值，文件最后修改时的时间戳，默认Date.now()

属性

lastModified：只读，文件的最后修改时间戳
name：只读，文件名称
size：同Blob
type：同Blob

方法

File接口没有定义任何方法，只从Blob继承了slice

3. FileReader

继承自EventTarget对象，允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据

注意：FileReader仅用于以安全的方式从用户或远程系统读取文件内容，不能用于从文件系统中按路径名简单的读取文件，要在JS中按路径名读取文件，应使用标准Ajax解决方案进行服务端文件读取，如果读取跨域，需要使用CORS权限

创建

new FileReader()
无参数，返回FileReader实例

属性

error：只读，一个DOMException，表示在读取文件时发生的错误
readyState：只读，状态，取值为EMPTY（值0，还没有加载任何数据）、LOADING（值1，数据正在被加载）、DONE（值2，已完成全部读取请求）
result：只读，文件的内容，该属性仅在读取操作完成后才生效，数据格式取决于使用哪个方法来启动读取操作

事件

onabort：处理abort事件，在读取操作被中断时触发
onerror：处理error事件，在读取操作发生错误时触发
onload：处理load事件，在读取操作完成时触发
onloadstart：处理loadstart事件，在读取操作开始时触发
onloadend：处理loadend事件，在读取操作结束时（成功或失败）触发
onprogress：处理progress事件，在读取操作进行时触发

注意：因为FileReader继承自EventTarget，所以以上事件也可以通过addEventListener方法添加

方法

abort()：中断读取操作
readAsArrayBuffer(arg)：将读取的数据保存在ArrayBuffer数据对象内，异步方法，调用后的结果在load事件内可取
readAsDataURL(arg)：将读取的数据保存在DataURL格式的base-64字符串内，异步方法，调用后的结果在load事件内可取
readAsText(arg, encoding)：将读取的数据保存在字符串内，异步方法，调用后的结果在load事件内可取

4. ArrayBuffer

一个通用的、固定长度的原始二进制缓冲区，类似数组，是一个字节数组，可读不可写，需要通过TypedArray和DataView来操作

创建

new ArrayBuffer(byteLength)
创建一个指定字节长度的ArrayBuffer

属性

byteLength：只读，返回字节长度

方法

isView(arg)：静态方法，判断arg是否是一种ArrayBuffer视图
slice(begin, end)：返回一个新的ArrayBuffer，内容是原ArrayBuffer的字节副本，从begin（包括）到end（不包括）

5. TypedArray

描述了ArrayBuffer的类数组视图，没有构造函数，有很多不同的全局属性，其值是指定元素类型的类型化数组构造函数，如下图以下仅以Int8Array举例

Int8Array

表示二进制补码8位有符号整数的数组，内容初始化为0，一旦建立，可以使用对象的方法引用数组中的元素，或使用标准数组索引语法

创建

new Int8Array()：无参构造函数，创建长度为0的实例
new Int8Array(length)：创建指定长度的实例，用0填充
new Int8Array(typedArray)：从一个已有的typedArray拷贝出一个新的实例
new Int8Array(object)：非typedArray类型的其他对象
new Int8Array(buffer, byteOffset, length)：buffer即ArrayBuffer或SharedArrayBuffer实例，byteOffset（字节偏移量，即从哪里截取buffer）和byteLength（字节长度，即截取buffer的长度）可选

属性

BYTES_PER_ELEMENT：静态，返回每个元素所占用的字节数，Int8Array为1
buffer：返回引用的ArrayBuffer
byteLength：返回字节长度
byteOffset：返回从类型化数组距离 ArrayBuffer 起始位置的偏移量（以字节为单位）
length：返回元素个数

方法

from(arrayLike, mapFn, thisArg)：静态，生成新的TypedArray
of(e1, e2, ..., en)：静态，创建一个具有可变数量参数的新的TypedArray
实例方法太多了，与普通数组类似，不列举了，详见下方参考资料

6. DataView

一个可以从二进制 ArrayBuffer 对象中读写多种数值类型的底层接口，使用它时，不用考虑不同平台的字节序（endianness）问题

创建

new DataView(buffer, byteOffset, byteLength)
通过一个ArrayBuffer或SharedArrayBuffer创建，byteOffset（字节偏移量，即从哪里截取buffer）和byteLength（字节长度，即截取buffer的长度）可选

属性

buffer：只读，引用的ArrayBuffer
byteLength：只读，视图的字节长度
byteOffset：只读，相对于引用的ArrayBuffer的字节偏移量

方法

getInt8(byteOffset)：从相对于起始位置偏移byteOffset个字节处开始，获取一个有符号的8-bit整数，即一个字节
setInt8(byteOffset, value)：从相对于起始位置偏移byteOffset个字节处开始，存储一个8-bit整数，即一个字节
其余方法与上述两个方法类似，就是符号、位数不同

其他

btoa：Binary to ASCII，将一个二进制字符串编码为base-64编码的ASCII字符串
atob：ASCII to Binary，对经过base-64编码的字符串进行解码
DataUrl：即前缀为data:协议的URL，格式为data:[<mediatype>][;base64],<data>，可以将小文件嵌入到文档中，如图片、字体等，一般会很长
BlobUrl：即前缀为blob:的URL，用来表示关联内存中的Blob对象，具有生命周期，离开被创建环境就失效，通过URL.createObjectURL获取、URL.revokeObjectURL销毁，通常用来显示图片、PDF等，通常很短

参考资料：