Blob，Binary Large Object的缩写，二进制范例的大对象，代表不可转变的原始数据
Blob基础用法
Blob对象
Blob对象指的是字节序列，而且具有size属性，是字节序列中的字节总数，和一个type属性，它是小写的ASCII编码的字符串示意的媒体范例字节序列。
size:以字节数返回字节序列的大小。猎取时，符合要求的用户代办必需返回一个FileReader或一个FileReaderSync对象可以读取的总字节数，假如Blob没有要读取的字节，则返回0 。
type:小写的ASCII编码字符串示意媒体范例Blob。在猎取时，用户代办必需Blob以小写情势返回a范例的ASCII编码字符串，如许当它转换为字节序列时，它是可剖析的MIME范例，或者是空字符串（0字节）假如是范例没法肯定。
组织函数
建立blob对象本质上和建立一个其他对象的体式格局是一样的，都是运用Blob() 的组织函数来举行建立。 组织函数接收两个参数：
第一个参数为一个数据序列，花样可以是
ArrayBuffer, ArrayBufferView, Blob, DOMString第二个参数是一个包括以下两个属性的对象
- type: MIME的范例,
- endings: 决议第一个参数的数据花样。默认值为”transparent”，用于指定包括行结束符n的字符串怎样被写入。 它是以下两个值中的一个： “native”，示意行结束符会被更改成合适宿主操作体系文件体系的换行符； “transparent”，示意会坚持blob中保留的结束符稳定。
var data1 = "a";
var blob1 = new Blob([data1]);
console.log(blob1); //输出：Blob {size: 1, type: ""}
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],{type : 'application/json'});
console.log(blob) // 输出 Blob(22) {size: 22, type: "application/json"}
// 建立一个8字节的ArrayBuffer，在其上建立一个每一个数组元素为2字节的“视图”
var abf = new ArrayBuffer(8)
var abv = new Int16Array(abf)
var bolb_ArrayBuffer = new Blob(abv, {type : 'text/plain'})
console.log(bolb_ArrayBuffer) //输出 Blob(4) {size: 4, type: "text/plain"}
slice要领
Blob对象有一个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); //输出：Blob {size: 6, type: ""}
console.log(blob2); //输出：Blob {size: 3, type: ""}slice用于文件分片上传
- 分片与并发连系，将一个大文件分割成多块，并发上传，极大地进步大文件的上传速率。
- 当收集题目致使传输错误时，只需要重传失足分片，而不是全部文件。别的分片传输可以越发及时的跟踪上传进度。
分片上传逻辑以下：
- 猎取要上传文件的File对象，依据chunk（每片大小）对文件举行分片
- 经由过程post要领轮循上传每片文件，个中url中拼接querystring用于形貌当前上传的文件信息；post body中寄存本次要上传的二进制数据片断
- 接口每次返回offset，用于实行下次上传
initUpload();
//初始化上传
function initUpload() {
var chunk = 100 * 1024; //每片大小
var input = document.getElementById("file"); //input file
input.onchange = function (e) {
var file = this.files[0];
var query = {};
var chunks = [];
if (!!file) {
var start = 0;
//文件分片
for (var i = 0; i < Math.ceil(file.size / chunk); i++) {
var end = start + chunk;
chunks[i] = file.slice(start , end);
start = end;
}
// 采纳post要领上传文件
// url query上拼接以下参数，用于纪录上传偏移
// post body中寄存本次要上传的二进制数据
query = {
fileSize: file.size,
dataSize: chunk,
nextOffset: 0
}
upload(chunks, query, successPerUpload);
}
}
}
// 实行上传
function upload(chunks, query, cb) {
var queryStr = Object.getOwnPropertyNames(query).map(key => {
return key + "=" + query[key];
}).join("&");
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://xxxx/opload?" + queryStr);
xhr.overrideMimeType("application/octet-stream");
//猎取post body中二进制数据
var index = Math.floor(query.nextOffset / query.dataSize);
getFileBinary(chunks[index], function (binary) {
if (xhr.sendAsBinary) {
xhr.sendAsBinary(binary);
} else {
xhr.send(binary);
}
});
xhr.onreadystatechange = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var resp = JSON.parse(xhr.responseText);
// 接口返回nextoffset
// resp = {
// isFinish:false,
// offset:100*1024
// }
if (typeof cb === "function") {
cb.call(this, resp, chunks, query)
}
}
}
}
}
// 每片上传胜利后实行
function successPerUpload(resp, chunks, query) {
if (resp.isFinish === true) {
alert("上传胜利");
} else {
//未上传完毕
query.offset = resp.offset;
upload(chunks, query, successPerUpload);
}
}
// 猎取文件二进制数据
function getFileBinary(file, cb) {
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function (e) {
if (typeof cb === "function") {
cb.call(this, this.result);
}
}
}Blob URL
blob协定的url运用时就像日常平凡运用的url一样，可以作为图片要求地点，也可以作为文件要求地点。花样：
blob:
http://XXX
- URL.createObjectURL(blob) 建立链接
- URL.revokeObjectURL(url)
下面是一个下载文件的示例，直接挪用即可完成文件下载
// file是要下载的文件（blob对象）
downloadHandler: function (file, fileName) {
let link = document.createElement('a')
link.href = window.URL.createObjectURL(file)
link.download = fileName
link.click()
window.URL.revokeObjectURL(link.href)
if (navigator.userAgent.indexOf('Firefox') > -1) {
const a = document.createElement('a')
a.addEventListener('click', function (e) {
a.download = fileName
a.href = URL.createObjectURL(file)
})
let e = document.createEvent('MouseEvents')
e.initEvent('click', false, false)
a.dispatchEvent(e)
}
}在从背景猎取的数据接口中把返回范例设置为blob
var x = new XMLHttpRequest();
x.responseType = 'blob'; // 返回一个blob对象 Blob URL和Data URL的区分
Blob URL
Data URL
- Blob URL的长度平常比较短，但Data URL由于直接存储图片base64编码后的数据，每每很长，如上图所示，浏览器在显现Data URL时运用了省略号（…）。当显式大图片时，运用Blob URL能猎取更好的可能性。
- Blob URL可以轻易的运用XMLHttpRequest猎取源数据,比方设置XMLHttpRequest返回的数据范例为blob
- Blob URL 只能在当前运用内部运用，把Blob URL复制到浏览器的地点栏中，是没法猎取数据的。Data URL相比之下，就有很好的移植性，可以在恣意浏览器中运用。
