文件操作相关对象和API

1|0ArrayBuffer

为了满足 JavaScript 与显卡之间大量的、实时的数据交换，它们之间的数据通信必须是二进制的，而不能是传统的文本格式。文本格式传递一个 32 位整数，两端的 JavaScript 脚本与显卡都要进行格式转化，将非常耗时。这时要是存在一种机制，可以像 C 语言那样，直接操作字节，将 4 个字节的 32 位整数，以二进制形式原封不动地送入显卡，脚本的性能就会大幅提升。

ArrayBuffer 代表内存之中的一段二进制数据，可以通过“视图”进行操作。“视图”部署了数组接口，这意味着，可以用数组的方法操作内存。它不能直接读写，只能通过视图（TypedArray视图和DataView视图）来读写，视图的作用是以指定格式解读二进制数据。

二进制数据相关操作在实际应用开发中发挥重要作用(file、fetch、xmlHttpRequest、canvas、webSocket)，但又常常被前端工程师所忽视。详细可查看《ECMAScript 6 入门 ArrayBuffer》。

2|0Blob

Blob 对象表示一个二进制文件的数据内容，通常用来读写文件。

const blob = new Blob(array [, options]);

2|1参数：

array: 可以是一个由 ArrayBuffer , ArrayBufferView , Blob , DOMString 等对象构成的 Array，表示新生成的 Blob 实例对象的内容。
options:
- type: 指定类型。
- endings: 内容结尾的换行符是否需要适配宿主系统。

2|2属性:

size: 文件的大小，单位为字节。
type: 文件的类型。

2|3方法:

slice: 用法与 Array 的 slice 相同，常用于数据分片。

const newBlob = oldBlob.slice([start [, end [, contentType]]])

3|0File 与 FileList

文件对象，继承于 Blob，并且可以用在任意的 Blob 对象的 context 中(如 FileReader，URL.createObjectURL())。FileList 为成员为 File 的类数组。

const file = new File(array, name[, options]);

3|1参数：

array: 与 Bolb 构造器的第一个参数相同。
name: 文件名或文件路径。
options:
- type: 指定类型。
- lastModified: 最后修改时间(时间戳)。

3|2属性:

name: 文件名。
type: 指定类型
size: 文件大小（单位字节）
lastModified: 最后修改时间。

4|0FileReader

用于web应用读取 File 或 Blob 对象的操作API对象。

4|1属性:

readyState: 当前读取状态。
- 0: 为加载。
- 1: 加载中。
- 2: 加载完成。
result: 读取完成后文件的内容。
error: 读取文件时发生的错误。

4|2事件:

onloadstart: 读取操作开始。
onabort: 读取操作被中断。
onprogress: 读取Blob。
onloadend: 读取操作结束。
onload: 读取操作完成。
onerror: 读取操作发生错误。

4|3方法:

abort: 终止读取操作。
readAsArrayBuffer: 读取完成后返回一个 ArrayBuffer 实例。
readAsBinaryString: 读取完成后返回二进制字符串。
readAsText: 读取完成后返回文本字符串。
readAsDataURL: 读取完成后返回 base64 的 DataURL。

5|0文件对象关系图

__EOF__

本文作者：Odyssey
本文链接：https://www.cnblogs.com/qingzhao/p/17135023.html
关于博主：I am a good person
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！