Blob是一种Javascript的对象类型,兼容到IE10
Blob
对象表示一个不可变、原始数据的类文件对象。
Blob 表示的不一定是JavaScript原生格式的数据。
File
接口基于Blob
,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
file 对象只是 blob 对象的一个更具体的版本,blob 存储着大量的二进制数据,并且 blob 的 size 和 type 属性,
都会被 file 对象 所继承
File
对象是特殊类型的 Blob
,且可以用在任意的 Blob 类型的 context 中。比如说, FileReader
, URL.createObjectURL()
, createImageBitmap()
, 及 XMLHttpRequest.send()
都能处理 Blob
和 File
。
Blob对象可以看做是存放二进制数据的容器,此外还可以通过Blob设置二进制数据的MIME类型。
创建Blob对象:
let blob = new Blob(["Hello World!"],{type:"text/plain"});
参数1:数据序列,任意格式的值 例如,任意数量的字符串,Blobs 以及 ArrayBuffers;
参数2:创建Blob对象的选项,有两个:
type -- MIME 的类型。
endings -- 决定 append() 的数据格式,(数据中的 \n 如何被转换)可以取值为 "transparent" 或者 "native"
(t* 的话不变,n* 的话按操作系统转换;t* 为默认) 。
Blob,url, base64之间的转化:
Blob和url
//Blob转化为url,必须接受Blob对象
var url = window.URL.createObjectURL(‘必须是Blob,File或MediaSource对象’);
//URL.createObjectURL()
//返回一个DOMString ,包含一个唯一的blob链接(该链接协议为以blob:,
//后跟唯一标识浏览器中的对象的掩码)。
//URL.revokeObjectURL()
//销毁之前使用URL.createObjectURL()方法创建的URL实例。
//注:URL对象不兼容低版本浏览器
dataURL转换为Blob对象 dataURL转换为File对象
dataUrl =>截取出base64部分=> Uint8Array()转化 => charCodeAt()转化 => new Blob
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
Blob转为base64
function blobToDataURL(blob, callback) {
let a = new FileReader();
a.onload = function (e) { callback(e.target.result); }
a.readAsDataURL(blob);
}
Blob的三种应用场景
1,分片上传 Blob.slice(start:number, end:number, contentType:string)
2,隐藏视频直链
3,通过url下载文件
分片上传demo:
var BYTES_PER_CHUNK = 1024 * 1024; // 每个文件切片大小定为1MB .
var blob = document.getElementById("file").files[0];
var slices = Math.ceil(blob.size / BYTES_PER_CHUNK);
var blobs = [];
slices.forEach(function(item, index) {
blobs.push(blob.slice(index,index + 1));
});
隐藏视频连接
var video = document.getElementById("bgvid");
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("GET", "images/mp4.mp4", true);
xhr.responseType = "blob";
xhr.onload = function() { if (this.status == 200) { var blob = this.response;
video.onload = function(e) { window.URL.revokeObjectURL(video.src); };
video.src = window.URL.createObjectURL(blob); } }
xhr.send();
下载文件:
createDownload("download.txt","download file");
function createDownload(fileName, content){
var blob = new Blob([content]);
var link = document.createElement("a");
link.innerHTML = fileName;
link.download = fileName;
link.href = URL.createObjectURL(blob);
document.getElementsByTagName("body")[0].appendChild(link);
}