什么是Blob
Blob是一种JavaScript对象类型。Blob对象存储着大量的二进制数据，我们所熟悉的file对象就是继承自Blob，并且size和type属性也是继承自Blob。
如何创建一个Blob对象
创建一个Blob对象需要传递两个参数，一个是数据序列，可以是任意格式的值，一个是包含两个属性的对象，{ type: MIME的类型, endings: 决定第一个参数的数据格式，可以取值为 “transparent” 或者 “native”（transparent的话不变，是默认值，native 的话按操作系统转换） 。 }
var blob = new Blob(["数据"], { type:'text/plain' }) //创建一个Blob对象 type--blod流类型 var reader = new FileReader(); //创建一个读取器对象 reader.readAsText(blob); //读取blod文件 reader.onload = function () { console.log(read.result); //从result获取数据 }
属性
Blob有两个属性size 、 type以及endings
- Blob.size
Blob对象中所包含的数据的大小（字节）。
- Blob.type
一个字符串，例如具体是哪种类型字符串或者哪种类型的文件, 表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串 - endings 默认值为"transparent"，用于指定包含行结束符
\n的字符串如何被写入。 它是以下两个值中的一个： "native"，表示行结束符会被更改为适合宿主操作系统文件系统的换行符； "transparent"，表示会保持blob中保存的结束符不变。
方法
- Blob.close()
关闭 Blob 对象，以便能释放底层资源。
- Blob.slice([start[, end[, contentType]]])
返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。其实就是对这个blob中的数据进行切割，我们在对文件进行分片上传的时候需要使用到这个方法。
Blob.slice方法
Blob对象有一个slice方法，返回一个新的Blob对象，包含了源Blob对象中制定范围内的数据。
参数说明：
| 参数 | 取值 | 描述 |
| start | 可选 | 代表 Blob 的字节的起始位置。如果传入的是一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。 |
| end | 可选 | 代表 Blob 的字节的起始位置。如果传入的是一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。 |
| contentType | 可选 | 给新的 Blob赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。 |
例如：
var data = "abcdef"; var blob1 = new Blob([data]); var blob2 = blob1.slice(0,5); console.log(blob1); //输出：Blob {size: 6, type: ""} console.log(blob2); //输出：Blob {size: 5, type: ""}
通过slice方法，从blob1中创建出一个新的blob对象，size等于5。
Blob对象能够添加到表单中，作为上传数据使用：
const content = '<a id="a"><b id="b">hey!</b></a>'; const blob = new Blob([content], {type: 'text/xml'}); formData.append('webmasterfile', blob); --一般作为上传文件
Blob的使用场景
分片上传
首先说说分片上传，我们在进行文件上传的时候，因为服务器的限制，会限制每一次上传到服务器的文件大小不会很大，这个时候我们就需要把一个需要上传的文件进行切割，然后分别进行上传到服务器。
假如需要做到这一步，我们需要解决两个问题:
- 怎么切割?
- 怎么得知当前传输的进度?
首先怎么切割的问题上面已经有过说明，因为File文件对象是继承与Blob对象的，因此File文件对象也拥有slice这个方法，我们可以使用这个方法将任何一个File文件进行切割。
分割也就是进行尺寸限定，一点点传输
var size = 1024 * 1024; // 每个文件切片大小定为1MB . var blob = document.getElementById("file").files[0]; var slices = Math.ceil(blob.size / size); var blobs = []; slices.forEach(function(item, index) { blobs.push(blob.slice(index,index + 1)); });
具体分割上传如下
function uploadFile(file) { var chunkSize = 1024 * 1024; //每片1M大小 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", url); xhr.overrideMineType("application/octet-stream"); xhr.onreadstatechange = function() { if(xhr.readyState === 4 && xhr.status ===200) { ++offset; if(offset === chunkQuantity) { alerrt("上传完成"); } else if(offset === chunckQuantity-1) { blob = file.slice(offset*chunkSize, totalSize); reader.readAsBinaryString(blob); } else { blob = file.slice(offset*chunkSize, (offset+1)*chunckSize); 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); }
Blob URL进行下载
Blob URL可以通过URL.createObjectURL(blob)创建。在绝大部分场景下，我们可以像使用Http协议得URL一样使用Blob URL。常见得场景有： 作为文件得下载地址和作为图片资源地址。
文件下载地址
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blob Test</title. <script> function createDownloadFile() { var content = "Blob Data"; var blob = new Blob([content]); var link = document.getElementByTageName('a')[0]; link.download = "file"; link.href = URL.createObjectURL(blob); } window.onload = createDownloadFile; </script> </head> <body> <a>下载</a> </body> </html>
点击下载按钮，浏览器将会下载一个名为file得文件，文件得内容是：Blob Data。通过Blob对象，我们在前端代码中就可以动态生成文件，提供 给浏览器下载。打开Chrome浏览器调试窗口，在Elements标签下可以看到生成得Blob URL
- 图片资源地址
为图片文件创建一个Blob URL，赋值给标签：
<!DOCTYPE html> <html lang="en"> <head> <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.getElementByTagName("img")[0]; img.src = blob; img.onload = function(e) { URL.revokeObjectURL(this.src); //释放createObjectURL创建得对象 } } </script> </head> <body> <input type="flie" accept="image/*" onchange="handleFile(this)" /> <br/> <img style="width:200px;height:200px;"> </body> </html>
imput中选择得图片会在这里显示出来
同时，可以在Network标签栏，发现这个Blob URL得请求信息
这个请求信息和我们平常使用Http URL获取得图片几乎完全一样。
window.URL.revokeObjectURL()
在每次调用createObjectURL()方法时，都会创建一个新的URL对象，即使你已经用相同的对象作为参数创建过。当不再需要这些URL对象时，每个对象必须通过调用URL.revokeObjectURL()方法来释放。浏览器会在文档退出时自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
window.URL.revokeObjectURL(objectURL);
- 我们还可以使用Data URL加载图片资源：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blob Test</title> <script> function handleFile(e) { var file = e.files[0]; var fileReader = new FileReader(); var img = document.getElementByTagName("img")[0]; fileReader.onload = function(e) { img.src = e.target.result; } fileReader.readAsDataURL(file); } </script> </head> <body> <input type="file" accept="image/*" onchange="handleFile(this)" /> </br> <img style="width:200px;height:200px;"> </body> </html>
Data URL对大家来说并不陌生，Web性能优化有一项措施：把小图片用base64编码直接嵌入到HTML文件中，实际就是利用了Data URL来获取图片数据。
最后，讲解下Blob URL和Data URL有什么区别呢？
1.Blob URL得长度一般比较短，但Data URL因为直接存储图片base64编码后得数据，往往很长。当显示大图片时，使用Blob URL更优。
2.Blob URL可以方便的使用XMLHttpRequest获取源数据，例如：
var blobUrl = URL.createObkectURL(new Blob(['Test'], {type: 'text/plain'})); var xhr = new XMLHttpRequest(); //如果是指xhr.responseType = 'blob',将返回一个Blob对象，而不是文本； //xhr.responseType = 'blob'; xhr.onload = function() { alert(xhr.responseText); } xhr.open('get', blobUrl); xhr.send(); 复制代码
对于Data URL， 并不是所有浏览器都支持通过XMLHttpRequest获取源数据的。
3.Blob URL只能在当前应用内部使用，把Blob URL复制到浏览器的地址栏中，是无法获取数据的。Data URL相比之下，就有很好的移植性，你可以在任意浏览器使用。
除了可以用作图片资源的网络地址，Blob URL也可以用作其他资源的网络地址，例如html文件、json文件等，为了保证浏览器能正确的解析Blob URL返回的文件类型，需要在创建Blob对象时指定相应的type：
//创建HTML文件的Blob URL var data = "<div style='color:red;'This is a blob</div>"; var blob = new Blob([data], {type: 'text/html'}); // 'application/json' var blobUrl = URL.createObjectURL(blob);
