Blob的三种应用场景及Blob，url，base64之间的转换

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);
}