小林笔记

Appearance

前端字节处理 ​

Blob ​

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了 blob 的功能并将其扩展以支持用户系统上的文件。

js
var aBlob = new Blob(array, options)
  • array 是一个由 ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings 会被编码为 UTF-8。
  • options.type 默认值为 ""，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
  • options.endings 默认值为"transparent"，"native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符， "transparent"，代表会保持 blob 中保存的结束符不变。

属性

  • size：字节数大小。
  • type：文件的 MIME 类型。

方法

  • slice：与字符串类似，但切的是字节。
  • text：返回 promise，获取 UTF-8 编码数据。

FileReader ​

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

js
const render = new FileReader()

属性

  • error：错误信息；
  • readyState：状态，未加载（0），加载中（1），加载完成（2）；
  • result：读取结果。

事件

  • onabort：读取中止触发；
  • onerror：读取错误触发；
  • onload：读取完成触发；

方法

  • abort：中止读取；
  • readAsArrayBuffer：读取数据为 ArrayBuffer；
  • readAsDataURL：读取 data: URL 格式的 Base64 字符串；
  • readAsText：读取为字符串。

从 blob 中提取数据 ​

js
const render = new FileReader()
render.addEventListener('loadend', () => {
  reader.result // 读取结果
})
FileReader.readAsDataURL(blob)

ArrayBuffer ​

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。不能直接操作 ArrayBuffer 的内容，而是要通过 TypedArray 对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

js
const arrayBuffer = new ArrayBuffer(30)

属性

  • byteLength：byte 的大小，在 ArrayBuffer 构造完成时生成，不可改变。

静态方法

  • isView：参数是 ArrayBuffer 的视图实例则返回 true。