DaMeng

发表于 更新于 分类于 ，

简介

Blob（Binary Large Object）是对数据块的引用或句柄，通过 Blob 表示二进制数据、文本文件，进而可以对其进行一些操作。

Blob 语法

创建

语法

1
var aBlob = new Blob( array[, options ]);
  • 参数
    • array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。
    • options 它可能会指定如下两个属性：
      • type，默认值为 ""，表示 array 参数中数据的 MIME 类型。
      • endings，用于指定包含行结束符\n的字符串如何被写入
        • "transparent"，默认值，表示保持 Blob 中的结束符
        • "native"，表示行结束符会被更改为适合宿主操作系统文件系统的换行符
  • 返回值
  • Blob 对象

示例

1
2
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含DOMString的数组
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob

属性

Blob.size

Blob.size 为只读，返回 Blob 对象中所包含数据的大小（字节）。

1
2
3
4
5
6
7
8
9
// fileInput是一个HTMLInputElement元素: <input type="file" multiple id="myfileinput">
var fileInput = document.getElementById("myfileinput");

// files是一个FileList对象(类似于NodeList)
var files = fileInput.files;
for (var i = 0; i < files.length; i++)
{
    alert(files[i].name + "文件的大小为 " + files[i].size + " 字节");
}

Blob.type

Blob.type 为只读，返回一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// fileInput是一个 HTMLInputElement，HTML Input 元素: <input type="file" multiple id="myfileinput">
var fileInput = document.getElementById("myfileinput");

// files 是一个 FileList 对象（与 NodeList 相似，是多个 File 对象的集合）
var files = fileInput.files;

// 仅允许 *.png, *.jpeg *.gif 类型的图片文件
var allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];

for (var i = 0; i < files.length; i++) {
    // 检查文件的文件类型是否属于 allowFileTypes 中的一种
    if (allowedFileTypes.indexOf(files[i].type) > -1) {
        // 对符合条件的文件进行处理
    }
}

方法

Blob.slice

1
Blob.slice([start[, end[, contentType]])

  • 参数

    • start 可选，表示拷贝的起始位置下标，默认值为 0。

      如果是负数，将会从数据的末尾从后到前开始计算。如 -10 表示 Blob 的倒数第十个字节。

      如果值大于源 Blob 的长度，则返回一个长度为 0 并且不包含任何数据的一个 Blob 对象。

    • end 可选，表示拷贝结束位置的下标，默认值为原始 Blob 的 size 属性值。

      负数表示从数据的末尾从后到前开始计算。

    • contentType 可选，新 Blob 的文档类型，默认值是一个空的字符串

      此值会被设置为新 Blob 的 type 属性值。

  • 返回值

    • 返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。

Blob.stream

1
Blob.stream()

返回 ReadableStream 对象，能读取 Blob 内容。

Blob.text

1
Blob.text()

方法返回一个 Promise 对象，包含 Blob 中的内容，使用 UTF-8 格式编码。

1
2
3
4
5
var textPromise = Blob.text();

Blob.text().then(text => /* 执行的操作…… */);

var text = await blob.text();

Blob.arrayBuffer

1
Blob.arrayBuffer()

方法返回一个 Promise 对象，包含 Blob 中的数据， ArrayBuffer 使用二进制格式编码。

1
2
3
4
5
var bufferPromise = blob.arrayBuffer();

blob.arrayBuffer().then(buffer => /* 处理 ArrayBuffer 数据的代码……*/);

var buffer = await blob.arrayBuffer();

Blob 数据来源

  • 由其他 Blob 复制而来

  • 从客户端数据库读取

  • 通过 HTTP 由 web下载

  • 使用 Blob 构造函数，从字符串、ArrayBuffer对象、或其他 Blob 创建

  • File 对象，File 对象是 Blob 对象的子类

    ​ File对象来源

    • 拖放 API
    • 文件系统 API

​

​