你们都不看的总集篇： 从零开始的大前端筑基之旅(浅显易懂，继续更新～)

万字长目录，觉得不错就顺手点个赞吧~

Blob 是什么

Blob（Binary Large Object）表明二进制类型的大目标。在数据库办理系统中，将二进制数据存储为一个单一个别的集合。

Blob 目标表明一个不可变、原始B _ y i数据的类文件目标。Blob 表明的纷歧G F y + J _ a定是JavaScript原生格局的数据。File 接口根据Blob，承继了 blY [ i r Vob 的功用并将其扩展使其支撑用户系统上的文件。

生成Blob

要从其他非blob目标和数据结构一个 Blob，需求运用 BlD 5 Rob() 结构函数。

Blob() 结构函数回来一个新的 Blob 目标。 blob的内容由参数数组中给出的值6 k D 3 $ a z的串联组成。

语法：

var aBlob = new Blob( ar- / O Iray, options );

参数

  • array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等目标构成的 Array ，或者其他类似目标的混合体，它将会被放进 Blob。7 L ( p ] wDOMStrip l *ngs会被编码为UTF-8。
  • options 是一个可选的Bloe # t e p *bPrope6 x Z 1 1 1 F IrtyBag字典，它会指定如下两} N [ : _ ! Y个特点：
    • type，默认值* 1 & Y o E A +为 “”，它代表了将会被放入到blob中的数组内容的MIME类型。
    • endings，用于指定包括行结束符8 l = a D / in的字符串如何被写入。 它是以下两个值中的一个：
      • “nativ4 7 E ve”，代表行结束符会被更改为合适宿主操作系统文件系统的换行符，或者
      • “transparent”，默认值，代表会保持blob中保存的结束符不变

运用字符串结构一个blob目标

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug)],H [ 0 {type : 'application/json'});

生成的blz . 6 _ 2 V *ob目标如下：

Bj ! t Z vlob {
size: 17
type: "application/json"
__proto__: Blob
}

Blob 目标含有两个特点：size 和 type+ D M ) 4 ] M E。其间 size 特点用于表明数据的巨细（以字节为单位），type 是 MIME 类型的字符串。

Mp u t ` ] !IME(Multipurpose Internet Mail Extensions)多用途互联K } S D ~ C Q网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来翻开的方式类型，当该扩展名文件被访问的时分，浏览器会0 7 p 2 D $ F 3自动运用指定应用程序来翻开。多` 5 5用于指定h b | R & 3一些客户端自定义的文件名，以及一些媒体文件o # R g m 4 g翻开方式。

办法

slice()

Blo8 [ ! Lb.slice() 办法用于创立一个包括源 Blob的指定字节范围内的数据的新 Blob 目标。

语法

v% L m u ( 5ar blob = instanceOfBlob.slice([start [, end [, contentD F ~ x m 8Type]]]X i j S ) y ^ -};

参数

  • start 可选
    表明被会被拷贝进新的 Blob 的字节的开始位置。假如传入F b F 7 i g g的是一个负数，那么这个偏移量将会从数据的结尾从后到前开始核算。举例来说, -10 将会是 Blob 的倒数第十个字节。它的默认值是0， 假如你传入的start的长度大于源 Blob 的长度，那么回来的将会是一个长度为0并且不包括任何数据的一个 Blob 目标。
  • enda i E c l s 可选
    end-1的对应的字节将会是被拷贝进新的Blob 的最后一个字节。假如传入了一^ l o ] _ h t个负数，那么这个偏移量将会从数据的结尾从后到前开始核算。举例来说， –& n a ( n – r ] d10 将会是 Blob 的倒数第十个字节。它的默认值就是它的原始长度(size).
  • c: U 8 D bontentType 可选
    给新的 Blob 赋予一个新的文档类型。这将会把它的 type 特点设为被传入的值。它的默认值是一个空的字符串。

stream()! K }

回来一个Readab3 6 VleStre2 Q ~ [ / 8 Y o =am目标，读取它将回来包括在Blob中的数据。

var stream = blob.stream();

text()

回来一个 Promise 目标且包括 blob 一切内容的 UTF-8 格局的 USVString。

Unicode 标量值（ Unicode scalar values ）：字符的代号。

在JavaScript中回来时， USVString 映射到 String 。它一般仅用于执行文本处理的 API，需求一l 9 / l 9 I 7 0 L串 unicode 标量值才干进行操作。

arrayBuffer()

回来一个 Promise 目标且包括 blob 一切内容的二进制格局的 ArrayBuffer。

FileReader.readAsArrayBuffer() 这个办法与之类似，但 arrayBuffer() 回来一个 promise 目标，而不是像 FileReader 相同回来一个根据事情的 APp ( h V ;I。

B# V M Slob 运用场景d % & P

分片上传

File 目标是特殊类型的 Blob，能l T + x够用在恣意的 Blob 类型的上下文中。

针对大文件传输的场景，咱们能够运用 slice 办法对大文件进行切开，然后分片进行上传。

存储下载数据

从互联网上下载的数据能够存储到 Blob 目标中。
例如，在一些需求鉴权的图片接口中，咱们能够运用fetch的方式，将鉴权信息附2 l : ` % r在恳求里，下载得到blobE = F w [ g ~ = ?目标，然后运用下– C k N P * ? I面的办法，t $ }将blob作为url运用。或者在前端直接经过构建Blob目标进行前9 L 6端文件下载Z ) * k。

axios.get('https://xxxxxx', {responseTyd W r x 0 ppe: 'blob'})
.then(res => {
let url = URL.createObjeZ T 0 % |ctURL(res.data)
let a = document.createElement('a')
a.setAttribute('download', '图片')
a.href = url
a.click()
})

Blob 用作 URL

Blob 能5 J X . 4 e $ q x够很简单的作为 、 或其他` r + B 标签的 URL。Blob URL/Object URL 是一种伪协议，答应 Blob 和 F( z @ H eile 目标用作图画，下载二进制数据链接等的 URL 源。

在浏览器中，咱们运用 URL.crem ) H J = LateObjectURL 办法来创立~ b [ R L K 7 ) – Blob URL，该办法接收一个 Blob 目标，并为其创立一个唯一的 URL。这个 U8 & 2RL 的生命周期和创立它的窗口中的 document 绑定。这个新的URL 目标表明指定的I O 7 Z / _ 8 File 目标或 Blob 目标。相当于这个办法创立了一个传入目标的内存引证地址

其形式为2 | : o G U h blob:/，在chrome中生成对应的示例如下：

"blob:chrome-extension://lecdifefmmfjnjjinhaennhdlmcaeeeb/0f36aeda-9351-4e38-9379-93efN t Sc9360f6b"

示例

将页面中的装备信息下载下来供用户方便运用。

const config = {: # 5 & A
name: 'lsqy',
password: 'yourpassword',
ak: 'XXXXXXXXXX',
sk: 'XXXXXXXXXX'
}
// 生成blob目标# h y c ; j x o
constm M 7 ] n P blobContent = new Blob(
[JSON.st% E , + ] y K +ringify(config, null, 2)],
{type : 'application/json'}
);
// 构建下载链U x 0接
const blobUrl = window.URL.createObjectURL! m i s Q d C 0 r(blobContent)
const lnk = document.createElement('a')
link.download = filename
link.href = blobUrl
// 触发点击
eleLink.click()

当你结束运用某个 URL 目标之后，应该经过调用URL.revokeObjectURL()这个办法来让浏览器知道不必在内存中继续保留对这个文件的引证了。

假如你拿到了一个blobURL，想要从头转成blob，只能1 i ]将此u. e U K v { { lrl当作下载链接从头下载

axios.get('blob:XXX', {responseType: 'blob'})
.then(res => {
// use res.data
})

Blob 转化为 Base64

Base64 是一种根据 64 个可~ P P = J F @ ^ c打印字符来表明二进制数据的表明办法，它常用于在处理文本数据的场合，表明、传输、存储一些二进制数据，包括 MIME 的电子邮件及 XML 的一些杂乱; V 9 ! ) Y D数据。

绝大多数现代浏览器都支撑一种名为 Data URLs 的特性，答I 3 T W 8 x U i @应运用 base64 对图片或其他文件的二进制数据进行Q 8 . | P u Q T编码，将其s ) K作为文本字符串嵌入网页中。

Data URLs 由四个部分组成：前缀（data:）、指示数据类型的7 @ b * o * MIME 类型、假如非文本则为可选的 bas ] ) @e64 符号、数据e ^ 5 z k G 自身：

data:[<mediatype>][;base64[ t t l j ( ] - 8],<data>

mediatype 是个 MIME 类型的字符串，例如 “image/jpeg” 表明 JPEG 图画文件。假Z x m o / / +如被1 t 4 Q ! h Y省略，则默认值为 text/# P F t : ?plain;charset=US-ASCII。

假如数据是文本类型，你能够直接将文本嵌入（根据文档类型，运用合适/ t u { N t M y L的实体字符或转义字符）。假如是二进制数据，你能够将数据进} N J L行 base64 编码之后再进行r M ]嵌入。比如嵌入一张图片：P A q

&B r a Q 8 S y S xlt;img alt="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

在编写 HTML 网页时，关于一些简单图片，一般会挑选将图片内容直接内嵌在网页中，从而减少不必要的网络恳求，假如你运用wG } y f F lebpack打包的话，能够启用 file-loader 和 url-loader，装备小于某个巨细的图片运用Data URL潜入到网页中。

运用base64还能够完成上传图1 ` A ? , / N片时的本地预览功用

readBlob(0 + 7event) {
const self = this;
const reader = new FileReader();
reader.onload = function () {
const base64 = this.result;[ Z w j ( u 9 }
// todo 这儿将base64赋值给 img 标签的 src，用于本地预览
// img.src = base64
self.uploadImage(base64); // 上传base64数据到服务器
};
reader.readAsDataURL(event.target.files[0]);
}

关于 FileReader 目标来说，除了支撑把 Blob/File 目标转化为 Data URL 之外，0 n k F H l Q ?它还提供了 readAsArrayBuffer() 和 readAsText() 办法，用于把 Blob/File 目标J N 4 , f I . t f转化u / M为其它的数据格局。

Blob 与 ArrayBuffeP I k u 0 U $r

  • Blob和ArrayBufferb ! E u L ,都能存储二进制数据。Blob相对而言贮存的二进制数据大（如File文件目标）。
  • ArrayBuffer目标表明原始的二进制数据% U 9缓冲区，即在内存中分配指定巨细的二进: b 1 @ ) W K w制缓冲区（容器），用于存储各种类型化数| F t j s R o ; [组的数据，是最根底的原始数据容器，无法直接读取或写入， 需求经过具体视图来读取或写入，即TypedArray目标或DataV| @ J o p ~ 5iew目标对内存巨细进行读取或写入；Blob目标表明一个不可变、原始数据v $ b f J m (的{ j A u类文件目标。
  • ArrayB, w c ` f y Juffer 是存在内存中的，能够直接操作。而 Blob 能够坐l * z b z B F c @落磁盘、高速缓存内存和其他不可用的位置。
  • 能够相互转化。
    Blob => ArrayBuffer 
leto Q 4 ] I 8 blob = new Blob([1,2,3,4])
let reader = new FileReader();
reader.onload = function(result) {
console.l; { v qog(result);
}
reader.readAsArrayBuff: i p p s J ter(blob);

ArrayBuffer => Blob

let blob = new Blob([buffeu ! q : .r])

blob与仿制张贴

张i ? #贴
有时会遇到 在输入框拦截? W A ` 2 R V k图片进行上传的场景，这时分就是监听paste事情，并获取剪切板内的文件

hah T vndlePaste (e) {
if (this.paste) {
this.uploadFi, o D : q e Vles(e.clipboardDataZ Q :.files);
}
}

咱们拿到的files就是根据blob的file类型。你能够运用FileReader的一切办法将blib变成你想要的样子

仿制
有时分咱们需求点击按钮或右键菜单触发一个仿制事情，将文本或图片扔进剪切板里。这时分咱们也需求生x N 成一个blob目标
假如是文本目标

"text/html": new Blob(["<U p 4 r 7 V y 0 ii>Markup</i> <b>text</b>. Paste me into a rich text editor."], { type: "text/ht_ % e J N J b q Pml" }),
"text/plain": new Blob(["FalC k }lback markup text. Paste me into a rich text editor."], { type: "tex# @ = ] & P n * rt/plain" })

假如是图片等文件类型数据，就需求自己fetch恳求下载图片为blob，然后扔到剪切板里

 new ClipboardItem({
[blob.type]: blob
})
【笔记】遇见Blob🙈🙈🙈

本K ) 6 h + @ h文收L G h 7 R纳于： 从零开始的大前端筑基之旅(浅显易懂，继续更新～)

引荐阅览：

  • 带你撸个归于j E a F g自己的rs I 4 H u @eact项目|webpack+babel+typesd H O S Z 0 6 S Mcript+es| n o E Slint
    没搭过项目的新人必定不容错失，带你解锁快捷开发小技巧

  • 片言只语带你理解「闭包」| 附运用场景
    很简单就能解释清的东西为什么要多费口舌呢？

  • 回流(reflow] B ^)与重绘(repaint)，KFC与MC
    每次这两个都会被一起提及，联系就好像KFC边上必定会有MC相同密切的让人摸不到脑筋。

  • viewport和1px | 东西人: 这是1px，设计师： 不，这不是
    设计我不可N C {，但吵架我内行啊

  • 可食用的「css布局干货」,纯Html示例，可调试 | 水平I 3 t、垂直、多列
    可观看，可调试，可带走，仅此一家，别无分店

  • 前端必须掌握的「CSS层叠上下文」讲解 | 纯手工示例，包教包会
    妹子与猫，你要哪个？

参阅文档

  1. 你不知道的 Blob
  2. 前端经过Blob完成文件下载
  3. MDN | Blob