JS中Blob对象学习及一般使用方法_js blob数据怎么当做参数传递

作者：盐析白兔 | 2024-02-26 07:47:19

踩

js blob数据怎么当做参数传递

Blob可以满足一些场景下的特殊需求。Blob，Binary Large Object的缩写，代表二进制类型的大对象。在Web中，Blob类型的对象表示不可变的类似文件对象的原始数据，通俗点说，就是Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作File对象一样操作Blob对象，实际上，File继承自Blob。

构造函数

要从其他非blob对象和数据构造一个 Blob，请使用 Blob() 构造函数。要创建一个 blob 数据的子集 blob，请使用 slice() 方法。

Blob(blobParts[, options])
1

返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。

参数说明：

blobParts：数组类型，数组中的每一项连接起来构成Blob对象的数据，数组中的每项元素可以是ArrayBuffer(二进制数据缓冲区), ArrayBufferView,Blob,DOMString。或其他类似对象的混合体。

options：可选项，字典格式类型，可以指定如下属性：

type，默认值为""，它代表了将会被放入到blob中的数组内容的MIME类型。

代码示例：

    var data1 = "abc";
    var data2 = new Uint8Array([1,2,3,4,5,6]);
    var data3 = "<div>hello,world</div>";
    var data4 = { "name": "defghigk" };

    var blob1 = new Blob([data1]);
    var blob2 = new Blob([data1, data2]);
    var blob3 = new Blob([data3]);
    var blob4 = new Blob([JSON.stringify(data4)]);
    var blob5 = new Blob([data4]);
    var blob6 = new Blob([data3, data4]);

    console.log(blob1);  //输出：Blob {size: 3, type: ""}
    console.log(blob2);  //输出：Blob {size: 9, type: ""}
    console.log(blob3);  //输出：Blob {size: 22, type: ""}
    console.log(blob4);  //输出：Blob {size: 19, type: ""}
    console.log(blob5);  //输出：Blob {size: 15, type: ""}
    console.log(blob6);  //输出：Blob {size: 37, type: ""}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

size代表Blob 对象中所包含数据的字节数。

这里要注意，使用字符串和普通对象创建Blob时的不同，blob4使用通过JSON.stringify把data4对象转换成json字符串，blob5则直接使用data4创建，两个对象的size分别为14和15。

blob4的size，因为JSON.stringify(data4)的结果为："{“name”:“defghigk”}"，为19个字节。

blob5的size 是因为使用普通对象创建Blob对象时，相当于调用了普通对象的toString()方法得到字符串数据，然后再创建Blob对象。所以，blob5保存的数据是"[object Object]"，是15个字节。

方法

Blob.slice

Blob对象有一个slice方法，返回一个新的Blob对象，包含了源Blob对象中制定范围内的数据。

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

参数说明：

start：可选，代表 Blob 里的下标，表示第一个会被会被拷贝进新的 Blob 的字节的起始位置。如果传入的是一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。

end：可选，代表的是 Blob 的一个下标，这个下标-1的对应的字节将会是被拷贝进新的Blob 的最后一个字节。如果你传入了一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。

contentType：可选，给新的 Blob 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。

示例：

    var data1 = "abc";
    var blob1 = new Blob([data1]);
    var blob2 = blob1.slice(1,2);
    console.log(blob2);  
1
2
3
4

slice可用于大文件切分后，小段上传

Blob.arrayBuffer

返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer

    var data1 = "abc";
    var blob1 = new Blob([data1]);
	var arrayBuffer1 = blob1.arrayBuffer()
    console.log(arrayBuffer1); 
1
2
3
4

Blob.text

返回一个promise且包含blob所有内容的UTF-8格式的 USVString。

    var data1 = "abc";
    var blob1 = new Blob([data1]);
	var text1 = blob1.text()
    console.log(text1); 
1
2
3
4

示例

使用 Blob 创建一个指向类型化数组的URL

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'}); // 传入一个合适的 MIME 类型
var url = URL.createObjectURL(blob);
// 会产生一个类似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
// 你可以像使用普通 URL 那样使用它，比如用在 img.src 上。
1
2
3
4
5

可以使用 Blob 对象隐藏真实的资源路径，在一定程度上可以起到数据的加密性，更多的是为了干扰爬虫。

比如日常使用的一些音频，视频，图片，我们都可以使用其 Blob 二进制数据流来表征数据，而非使用 uri，就像经常用到的 image src 的 dataUrl。

从 Blob 中提取数据

从Blob中读取内容的唯一方法是使用 FileReader。以下代码将 Blob 的内容作为类型数组读取：

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result 包含被转化为类型数组 typed array 的 blob
});
reader.readAsArrayBuffer(blob);  
1
2
3
4
5