blob对象中的type属性,Blob对象
写在前面
本文主要总结了Blob对象的属性和功能，并通过演示介绍了Blob对象的应用场景。
Blob对象
长期以来，JS没有更好的方法直接处理二进制。Blob的存在让我们可以通过JS直接操作二进制数据。
Blob对象是包含只读原始数据的类文件对象。Blob对象中的数据不必是JavaScript中的本地形式。文件接口基于Blob，继承了Blob的功能，并扩展到支持用户计算机上的本地文件。
对象可以看作是存储二进制数据的容器，二进制数据的MIME类型可以通过Blob来设置。
创建Blob
通过构造函数
var Blob=new Blob(data arr:array any，opt:{ type:string })；DataArray:包含要添加到Blob对象的数据的数组。数据可以是任意数量的ArrayBuffer、ArrayBufferView、Blob或DOMString对象。
Opt: object，用于设置Blob对象的属性(比如MIME类型)。
1.创建一个用DOMString对象填充的Blob对象。
2.创建一个用ArrayBuffer对象填充的Blob对象。
3.创建一个用ArrayBufferView对象填充的Blob对象(ArrayBufferView可以基于ArrayBuffer创建，返回值是一个类数组。如下：创建一个8字节的ArrayBuffer，创建一个“视图”，每个数组元素有2个字节在上面)
通过Blob.slice()
此方法返回一个新的Blob对象，该对象包含原始Blob对象中指定范围内的数据。
Blob.slice (start: number，end: number，content type: string) start:开始索引，默认值为0
End:截取end指标(不包括end)
ContentType:新Blob的MIME类型，默认为空字符串。
var canvas=document . getelementbyid( canvas )；canvas . to blob(function(blob){ console . log(blob)；});
应用场景
如前所述，File接口是基于Blob的，继承了Blob的功能并对其进行了扩展，所以我们可以像Blob一样使用File对象。
分片上传
通过Blob.slice方法，可以对大文件进行切片，将每个文件切片依次提交到后台，这样就可以分片上传文件了。
切片上传逻辑如下：
获取待上传文件的File对象，按照chunk(每个块的大小)对文件进行切片，通过post方法循环上传每个文件，其中url中拼接的querystring用于描述当前上传文件的信息；在post主体中存储要上传的二进制数据片段的接口每次执行下一次上传时都返回offset。以下是片段上传的简单实现：
initUpload()；//初始化上传函数init upload(){ var chunk=100 * 1024；//每片大小var输入=文档。getelementbyid( file )；//输入文件输入。onchange=function(e){ var file=this。文件[0]；var query={ }；var chunks=[]；如果(!file){ var start=0；//文件分片for(var I=0；我数学。ceil(文件。大小/区块)；I){ var end=start chunk；chunks[i]=file.slice(start，end)；开始=结束；} //采用邮政方法上传文件//url查询上拼接以下参数，用于记录上传偏移//发布正文中存放本次要上传的二进制数据query={ fileSize: file.size，dataSize: chunk，nextOffset: 0 } upload(chunks，query，successPerUpload)；} }}//执行上传函数上传(chunks，query，CB){ var query str=object。getownpropertynames(查询).map(key={ return key = query[key]；}).联接("");var xhr=new XMLHttpRequest()；xhr.open(POST ， http://xxxx/opload？查询字符串)；xhr。重写imetype(“应用程序/八位字节流”)；//获取帖子正文中二进制数据var指数=数学。楼层(查询。下一次偏移/查询。datasize)；getFileBinary(chunks[index]，function(binary){ if(xhr。sendas二进制){ xhr。sendas二进制(二进制)；} else { xhr。发送(二进制)；} });xhr。onreadystatechange=function(e){ if(xhr。就绪状态===4){ if(xhr。status===200){ var resp=JSON。解析(xhr。responsetext)；//接口返回next offset//resp={//is finish:false，//offset:100 * 1024//} if(类型CB=== function ){ CB。call(this，resp，chunks，query)} } }//每片上传成功后执行函数successPerUpload(resp，chunks，query){ if(resp。是finish===true){ alert(上传成功);} else { //未上传完毕查询。偏移=响应。偏移；上传（组块，查询，成功上传);}}//获取文件二进制数据函数getFileBinary(file，CB){ var reader=new file reader()；reader.readAsArrayBuffer(文件);读者。onload=function(e){ if(CB的类型=== function ){ CB。叫(这个，这个。结果)；} }}以上是文件分片上传前端的简单实现，当然，此功能还可以更加完善，如后台需要对合并后的文件大小进行校验；或者前端加密文件，全部上传完毕后后端解密校验等，此处不做赘述。
通过url下载文件
窗户。统一资源定位器对象可以为一滴对象生成一个网络地址，结合a标签的下载属性，可以实现点击全球资源定位器(统一资源定位器)下载文件
实现如下：
createDownload(download.txt ，下载文件);函数createDownload(文件名，内容){ var Blob=新Blob([内容])；var link=文档。createelement( a )；link . innerhtml=filename link . download=文件名；链接。href=URL。createobjecturl(blob)；文档。getelementsbytagname( body )[0].appendChild(链接);}执行后页面上会生成此一滴对象的地址，点击后可下载：
查看下载结果：
通过url显示图片
我们知道，img的科学研究委员会属性及背景的全球资源定位器(统一资源定位器)属性，都可以通过接收图片的网络地址或base64来显示图片，同样的，我们也可以把图片转化为一滴对象，生成URL(URL.createObjectURL(blob))，来显示图片。
小结
本文主要介绍了一滴对象的属性和使用场景，其实我们可以看到，斑点对象作为一个装填二进制数据的基本对象，其作用也仅仅是一个容器，而真正的业务功能则需要通过文件阅读器、网址、画布等对象实现，之后会继续对这些对象的功能和应用场景进行归纳。
参考资料
[1] MDN_Blob
[2] W3C工作草案
关于HTML5 Blob对象的具体使用，本文就讲到这里。更多相关HTML5 Blob对象，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。