搞懂前端二进制系列（一）：🍇 认识Blob对象

参考资料：

https://juejin.cn/post/6844904183661854727 【你不知道的Blob】

https://juejin.cn/post/6844904144453517326【Blob总结和使用案例】

一、概述

Blob全称为Binary Larget Object，意思是二进制类型大对象，表示用来存储二进制数据，通常在前端用于文件上传，图片预览等等。在 JavaScript 中 Blob 对象表示一个不可变、原始数据的类文件对象，它不一定非得是大量数据，也可以表示一个小型文件的内容。在JS中，File文件对象就是基于Blob，继承 Blob 的功能并将其扩展使其支持用户系统上的文件。

构造方法

const blob = new Blob(blobParts,config)

这个构造方法接收两个参数：

blobParts：它是一个由 ArrayBuffer，ArrayBufferView，Blob，DOMString 等对象构成的数组。DOMStrings 会被编码为 UTF-8
config：配置属性
- type：默认值为 "" ，表示将会被放入到 blob 中的数组内容的 MIME 类型
- endings：默认值为 "transparent"，用于指定包含行结束符 \n 的字符串如何被写入。它是以下两个值中的一个："native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持 blob 中保存的结束符不变

属性和方法

Blob 对象拥有 2 个属性：

size ：只读，表示 Blob 对象中所包含的数据大小（以字节为单位）；
type ：只读，值为字符串，表示该 Blob 对象所包含数据的 MIME 类型。若类型未知，则该属性值为空字符串。

方法：

slice([start[, end[, contentType]]]) ：返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。
stream()：返回一个能读取 Blob 内容的 ReadableStream 。
text()：返回一个 Promise 对象且包含 Blob 所有内容的 UTF-8 格式的 USVString 。
arrayBuffer()：返回一个 Promise 对象且包含 Blob 所有内容的二进制格式的 ArrayBuffer 。

二、方法解析

Blob.slice(start, end, contentType)

返回一个新的Blob对象，包含了源 Blob 对象中指定范围内的数据,start参数代表范围的开始下标，end代表复制范围的结束下标，contentType表示返回的Blob的文档类型。

let blob=new Blob(["这是保存到Blob中的文本数据"],{type:"application/text"})

let newBlob=blob.slice(0,5,"text/html");

console.log(newBlob) // { size: 5,type: "text/html" }

Blob.stream()

返回一个能读取blob内容的 ReadableStream流，ReadableStream对象包含的方法有很多，这里不展开讨论，仅示例读取

let blob=new Blob(["这是保存到Blob中的文本数据"],{type:"application/text"})

var stream = blob.stream();

let reader=stream.getReader()

reader.read().then(content=> { console.log(content) }); // 这里的content是一个对象 { value: Unit8Array, done: false }

// 可以对Unit8Array进行解码

reader.read().then(content=> {

    const textDecoder = new TextDecoder();

    console.log(content);

    const decodeText = textDecoder.decode(content.value);

    console.log(decodeText) // 这是保存到Blob中的文本数据

});

Blob.text()

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

let blob=new Blob(["这是保存到Blob中的文本数据"],{type:"application/text"})

let textPromise = blob.text();

blob.text().then(text => console.log(text)); // 这是保存到Blob中的文本数据

Blob.arrayBuffer()

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

let blob=new Blob(["这是保存到Blob中的文本数据"],{type:"application/text"})

var bufferPromise = blob.arrayBuffer();

blob.arrayBuffer().then(buffer => {

    console.log(buffer) // 返回ArrayBuffer对象

});

三、用法示例

简单的字符串创建

利用字符串来创建Blob对象，并指定他们的类型

const a = '1,2,3';

const b = '<div style="color: red">test</div>';

const obj = { name: 'xiaoming', age: 18 };

const b1 = new Blob([a], { type: 'text/plain' });

const b2 = new Blob([b], { type: 'text/html' });

const b3 = new Blob([JSON.stringify(obj)], { type: 'application/json' });

const b4 = new Blob([obj]);

console.log(b1);

console.log(b2);

console.log(b3);

console.log(b4);

从类型化数组和字符串创建 Blob

JavaScript类型化数组是一种类似数组的对象，并提供了一种用于 访问原始二进制数据的机制

let hello = new Uint8Array([72, 101, 108, 108, 111]); // 二进制格式的 "hello"

let blob = new Blob([hello, ' ', 'leo'], {type: 'text/plain'});

// Output: "Hello leo"

组装新的 Blob

let blob1 = new Blob(['<html><h2>Hello Leo</h2></html>'], {type : 'text/html'});

let blob2 = new Blob(['<html><h2>Happy Boy!</h2></html>'],{type : 'text/html'});

let slice1 = blob1.slice(16);

let slice2 = blob2.slice(0, 16);

await slice1.text();

// currtent slice1 value: "Leo</h2></html>"

await slice2.text();

// currtent slice2 value: "<html><h2>Happy "

let newBlob = new Blob([slice2, slice1], {type : 'text/html'});

await newBlob.text();

// currtent newBlob value: "<html><h2>Happy Leo</h2></html>"

四、使用场景

图片本地预览

<body>

    <h1>1.DataURL方式：</h1>

    <input type="file" accept="image/*" onchange="selectFileForDataURL(event)">

    <img id="output1">

    <h1>2.Blob方式：</h1>

    <input type="file" accept="image/*" onchange="selectFileForBlob(event)">

    <img id="output2">

    <script>

        // 1.DataURL方式：

        async function selectFileForDataURL() {

            const reader = new FileReader();

            reader.onload = function () {

                const output = document.querySelector("#output1")

                output.src = reader.result;

            }

            reader.readAsDataURL(event.target.files[0]);

        }

        //2.Blob方式：

        async function selectFileForBlob(){

            const reader = new FileReader();

            const output = document.querySelector("#output2");

            const imgUrl = window.URL.createObjectURL(event.target.files[0]);

            output.src = imgUrl;

            reader.onload = function(event){

                window.URL.revokeObjectURL(imgUrl);

            }

        }

    </script>

</body>

下载文件

<body>

    <button onclick="download()">Blob 文件下载</button>

    <script>

        function download(){

            const fileName= "Blob文件.txt";

            const myBlob = new Blob(["一文彻底掌握 Blob Web API"], { type: "text/plain" });

            downloadFun(fileName, myBlob);

        }

        function downloadFun(fileName, blob){

            const link = document.createElement("a");

            link.href = URL.createObjectURL(blob);

            link.download = fileName;

            link.click();

            link.remove();

            URL.revokeObjectURL(link.href);

        }

    </script>

</body>