[HTML5] Blob对象

 

写在前面

本篇主要总结Blob对象属性及做用，经过DEMO介绍Blob对象的应用场景。

Blob对象

一直以来，JS都没有比较好的能够直接处理二进制的方法。而Blob的存在，容许咱们能够经过JS直接操做二进制数据。

一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不必定得是JavaScript中的原生形式。File接口基于Blob，继承了Blob的功能,而且扩展支持了用户计算机上的本地文件。

Blob对象能够看作是存放二进制数据的容器，此外还能够经过Blob设置二进制数据的MIME类型。

建立Blob

经过构造函数

var blob = new Blob(dataArr:Array<any>, opt:{type:string});

• dataArray：数组，包含了要添加到Blob对象中的数据，数据能够是任意多个ArrayBuffer，ArrayBufferView， Blob，或者 DOMString对象。
• opt：对象，用于设置Blob对象的属性（如：MIME类型）

一、建立一个装填DOMString对象的Blob对象

二、建立一个装填ArrayBuffer对象的Blob对象

三、建立一个装填ArrayBufferView对象的Blob对象（ArrayBufferView可基于ArrayBuffer建立，返回值是一个类数组。以下：建立一个8字节的ArrayBuffer，在其上建立一个每一个数组元素为2字节的“视图”）

经过Blob.slice()

此方法返回一个新的Blob对象，包含了原Blob对象中指定范围内的数据

Blob.slice(start:number, end:number, contentType:string)

• start：开始索引，默认为0
• end：截取结束索引（不包括end）
• contentType：新Blob的MIME类型，默认为空字符串

经过canvas.toBlob()

var canvas = document.getElementById("canvas"); canvas.toBlob(function(blob){ console.log(blob); });

应用场景

前面提到，File接口基于Blob，继承了Blob的功能并进行了扩展，故咱们能够像使用Blob同样使用File对象。

分片上传

经过Blob.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); } } }

以上是文件分片上传前端的简单实现，固然，此功能还能够更加完善，如后台须要对合并后的文件大小进行校验；或者前端加密文件，所有上传完毕后后端解密校验等，此处不作赘述。

经过url下载文件

window.URL对象能够为Blob对象生成一个网络地址，结合a标签的download属性，能够实现点击url下载文件
实现以下：

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

执行后页面上会生成此Blob对象的地址，点击后可下载：

查看下载结果：

经过url显示图片

咱们知道，img的src属性及background的url属性，均可以经过接收图片的网络地址或base64来显示图片，一样的，咱们也能够把图片转化为Blob对象，生成URL（URL.createObjectURL(blob)），来显示图片。

小结

本文主要介绍了Blob对象的属性和使用场景，其实咱们能够看到，Blob对象做为一个装填二进制数据的基本对象，其做用也仅仅是一个容器，而真正的业务功能则须要经过FileReader、URL、Canvas等对象实现，以后会继续对这些对象的功能和应用场景进行概括。

参考：

https://www.cnblogs.com/hhhyaaon/p/5928152.html