在一般的 Web 开发中，很少会用到 Blob，但 Blob 可以满足一些场景下的特殊需求。Blob，Binary Large Object 的缩写，代表二进制类型的对象。Blob 的概念在一些数据库中有使用到，例如，MYSQL中的 BLOB 类型就表示二进制数据的容器。在 Web 中，Blob 类型的对象表示不可变的类似文件对象的原始数据。通俗点说，Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作 File 对象一样操作 Blob 对象，实际上，File 继承自Blob。
1.1 创建
通过Blob的构造函数创建Blob对象：
Blob( blobParts[, options] )
参数说明：
blobParts：数组类型，数组中的每一项连接起来构成 Blob 对象的数据， 数组中的每项元素可以是 ArrayBuffer,
ArrayBufferView, Blob, DOMString 。
options：可选项，字典格式类型，可以指定如下两个属性：
type：默认值为 ""，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
endings：默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。
它是以下两个值中的一个：
"native"，表示行结束符会被更改为适合宿主操作系统文件系统的换行符；
"transparent"，表示会保持blob中保存的结束符不变。
var data1 = "a";
var data2 = "b";
var data3 = "<div style='color:red;'>This is a blob</div>";
var data4 = { "name": "abc" };
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);
console.log(blob2);
console.log(blob3);
console.log(blob4);
console.log(blob5);
console.log(blob6);
size:Blob 对象中所包含数据的字节数;
注意: 使用字符串和普通对象创建 Blob 时的不同，blob4 使用通过 JSON.stringify 把 data4 对象转换成 json 字符串，blob5 则直接使用 data4 创建，两个对象的 size 分别为 14 和 15 。blob4 的 size 等于 14 很容易理解，因为 JSON.stringify(data4) 的结果为："{“name”:“abc”}"，正好14 个字节(不包含最外层的引号)。blob5 的 size 等于 15 是如何计算而来的呢？实际上，当使用普通对象创建 Blob 对象时，相当于调用了普通对象的 toString() 方法得到字符串数据，然后再创建 Blob 对象。所以，blob5 保存的数据是 “[object Object]” ，是 15 个字节(不包含最外层的引号)。
1.2 slice方法
slice 方法，返回一个新的 Blob对象，包含了原 Blob 对象中指定范围内的数据。
slice([start[, end[, contentType]]])
参数说明：
start： 可选，代表 Blob 里的下标，表示第一个会被会被拷贝进新的 Blob 的字节的起始位置。
如果传入的是一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。
end： 可选，代表的是 Blob 的一个下标，这个下标 -1 的对应的字节将会是被拷贝进新的Blob 的最后一个字节。
如果你传入了一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。
contentType： 可选，给新的 Blob 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。
var data = "abcdef";
var blob1 = new Blob([data]);
var blob2 = blob1.slice(0,3);
console.log(blob1);
console.log(blob2);
通过slice方法，从blob1中创建出一个新的blob对象，size等于3；
2.1 分片上传
前面已经说过，File 继承自 Blob，因此我们可以调用 slice 方法对大文件进行分片长传。
function uploadFile(file) {
var chunkSize = 1024 * 1024;
var totalSize = file.size;
var chunkQuantity = Math.ceil(totalSize/chunkSize);
var offset = 0;
var reader = new FileReader();
reader.onload = function(e) {
var xhr = new XMLHttpRequest();
xhr.open("POST","http://xxxx/upload?fileName="+file.name);
xhr.overrideMimeType("application/octet-stream");
xhr.onreadystatechange = function() {
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
++offset;
if(offset === chunkQuantity) {
alert("上传完成");
} else if(offset === chunkQuantity-1){
blob = file.slice(offset*chunkSize, totalSize);
reader.readAsBinaryString(blob);
} else {
blob = file.slice(offset*chunkSize, (offset+1)*chunkSize);
reader.readAsBinaryString(blob);
}else {
alert("上传出错");
if(xhr.sendAsBinary) {
xhr.sendAsBinary(e.target.result);
} else {
xhr.send(e.target.result);
var blob = file.slice(0, chunkSize);
reader.readAsBinaryString(blob);
这段代码还可以进一步丰富，比如显示当前的上传进度，使用多个XMLHttpRequest对象并行上传对象（需要传递分片数据的位置参数给服务器端）等。
2.2 Blob URL
Blob URL 是 blob 协议的 URL，它的格式如下：
blob:http://XXX
Blob URL 可以通过 URL.createObjectURL(blob) 创建。在绝大部分场景下，我们可以像使用 Http 协议的 URL 一样，使用 Blob URL。常见的场景有：作为文件的下载地址和作为图片资源地址
- 文件下载地址
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Blob Test</title>
<script>
function createDownloadFile() {
var content = "Blob Data";
var blob = new Blob([content]);
var link = document.getElementsByTagName("a")[0];
link.download = "file";
link.href = URL.createObjectURL(blob);
window.onload = createDownloadFile;
</script>
</head>
<a>下载</a>
</body>
</html>
点击下载按钮，浏览器将会下载一个名为 file 的文件，文件的内容是：Blob Data。通过 Blob 对象，我们在前端代码中就可以动态生成文件，提供给浏览器下载。打开 Chrome 浏览器调试窗口，在 Elements 标签下可以看到生成的 Blob URL 为：
- 图片资源地址
为图片文件创建一个Blob URL，赋值给 < img > 标签：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Blob Test</title>
<script>
function handleFile(e) {
var file = e.files[0];
var blob = URL.createObjectURL(file);
var img = document.getElementsByTagName("img")[0];
img.src = blob;
img.onload = function(e) {
URL.revokeObjectURL(this.src);
</script>
</head>
<input type="file" accept="image/*" onchange="handleFile(this)" />
<img style="width:200px;height:200px">
</body>
</html>
input 中选择的图片会在< img >里显示出来，如图所示：
同时，可以在Network标签栏，发现这个Blob URL的请求信息：
这个请求信息和平时我们使用的 Http URL 获取图片几乎完全一样。我们还可以使用 Data URL 加载图片资源：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Blob Test</title>
<script>
function handleFile(e) {
var file = e.files[0];
var fileReader = new FileReader();
var img = document.getElementsByTagName("img")[0];
fileReader.onload = function(e) {
img.src = e.target.result;
fileReader.readAsDataURL(file);
</script>
</head>
<input type="file" accept="image/*" onchange="handleFile(this)" />
<img style="width:200px;height:200px">
</body>
</html>
FileReader 的 readAsDataURL 生成一个 Data URL，如图所示：
Data URL 对大家来说应该并不陌生，Web 性能优化中有一项措施：把小图片用 base64 编码直接嵌入到 HTML 文件中，实际上就是利用了 Data URL 来获取嵌入的图片数据。
- 那么 Blob URL 和 Data URL 有什么区别呢？
（1）Blob URL 的长度一般比较短，但Data URL因为直接存储图片base64编码后的数据，往往很长，如上图所示，浏览器在显 示 Data URL 时使用了省略号（…）。当显式大图片时，使用Blob URL能获取更好的可能性。
（2）Blob URL 可以方便的使用 XMLHttpRequest 获取源数据；而 Data URL，并不是所有浏览器都支持通过 XMLHttpRequest 获取源数据的。例如：
var blobUrl = URL.createObjectURL(new Blob(['Test'], {type: 'text/plain'}));
var x = new XMLHttpRequest();
x.onload = function() {
alert(x.responseText);
x.open('get', blobUrl);
x.send();
（3）Blob URL 只能在当前应用内部使用，把Blob URL复制到浏览器的地址栏中，是无法获取数据的。Data URL 相比之下，就有很好的移植性，你可以在任意浏览器中使用。
除了可以用作图片资源的网络地址，Blob URL 也可以用作其他资源的网络地址，例如 html 文件、json 文件等，为了保证浏览器能正确的解析 Blob URL 返回的文件类型，需要在创建 Blob 对象时指定相应的 type：
var data = "<div style='color:red;'>This is a blob</div>";
var blob = new Blob([data], { type: 'text/html' });
var blobURL = URL.createObjectURL(blob);
var data = { "name": "abc" };
var blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
var blobURL = URL.createObjectURL(blob);
原文链接：https://www.jianshu.com/p/4d014a45aaf7
blob对象介绍
一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。
创建blob对象
创建blob对象本质上和创建一个其他对象的方式是一样的，都是使用Blob() 的构造函数来进行创建。 构造函数接受两个参数：
第一个参数为一个数据序列，可以是任意格式的值。
第二个参数是一个包含两个属性的对象{ type: MIME的类型, endings: 决定第一个参数的数据格式，可以取值为 “transparent” 或者 “native”（tran
图片来源：https://zhuanlan.zhihu.com/p/97768916这篇主要介绍Blob和ArrayBuffer相关的一些API之间的关系和用途，并不会详细介绍每个属性和方法，更多的是想讲述清楚一些概念。
本篇主要总结Blob对象属性及作用，通过DEMO介绍Blob对象的应用场景。
Blob对象
一直以来，JS都没有比较好的可以直接处理二进制的方法。而Blob的存在，允许我们可以通过JS直接操作二进制数据。
一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob，继承了Blob的功能,并且扩展支持了用户计算机上的本地文件。
Blob对象可以看做是存放二进制数据的容器，此外还可以通过Blob设置二进制数据的MIME类型。
创建Blob
通过构造函数
var blob = new Blob(dat
$("#file").on("change", function(e){
var url = URL.createObjectURL(this.files[0]); // URL是window内置的对象, createObjectURL就是把blob对象(File的父类)转成url地址(浏览器本地的-跟后台无关)
this.files[0]对象如下
示例：使用 Blob 创建一个指向类型化数组的 URL
另一种读取 Blob 中内容的方式是使用 Response 对象。
某些时候后台下载文件返回到前端被转换为 Blob 对象，正常下载时，返回正确的文件流，异常时，后台返回一段包含错误信息的 json ，这时候需要提示用户下载失败，看下面代码...
Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。 为了更直观的感受 Blob 对象，我们先来使用 Blob 构造函数，创建一个 myBlob 对象，具体如下图所示：
size 属性用于表示数据的大小（以字节为单位）
type 是 MIME 类型的字符串。text/html、image/p
Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。 为了更直观的感受 Blob 对象，我们先来使用 Blob 构造函数，创建一个 myBlob 对象，具体如下图所示：
如你所见，myBlob 对象含有两个属性：size 和 type。其中 属性用于表示数据的大小（以字节为单位）， 是 MIME 类型的
一、Blob 是什么
Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在JavaScript中 Blob 类型的对象表示不可变的类似文件对象的原始数据。为了更直观的感受 Blob 对象，我们先来使用 Blob 构造函数，...
第一步——聊聊 概念：
Blob（Binary Large Object）对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的 API（比如 File 对象），都是建立在 Blob 对象基础上的，继承了它的属性和方法。
第二步：两种使用方式：
生成 Blob 对象有两种方法：一种是使用 Blob 构造函数，另一种是对现有的 Blob 对象使用 slice 方...
Blob分析(Blob Analysis)是对图像中相同像素的连通域进行分析，该连通域称为Blob。Blob分析可为机器视觉应用提供图像中的斑点的数量、位置、形状和方向，还可以提供相关斑点间的拓扑结构。
Blob翻译成中文，是“一滴”，“一抹”，“一团”，“弄脏”，“弄错”的意思。在计算机视觉中的Blob是指图像中的具有相似颜色、纹理等特征所组成的一块连通区域。显然，Blob分析其
WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此API，您可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。
何为 WebSocket 对象？
WebSocket 对象是 WebSockets 的接口之一，用于连接WebSocket服务器的主要接口，之后可以在这个连接上发送 和接受数据。
WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。
使用WebSoc.
FormData
简介：FormData接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用XMLHttpRequest.send()方法送出，如果发送请求时的编码类型被设为"multipart/form-data"，它会使用和表单一样的格式
基本使用：
const formData = new FormData();
formData.append('name1',...
