使用Blob上传文件的完整步骤

一滴

Blob，二进制大对象的缩写，是一个二进制类型的大对象，代表不可改变的原始数据

在计算机中，BLOB通常是用于存储数据库中二进制文件的字段类型。

Blob的基本用法

Blob对象

Blob对象引用字节序列，并具有大小属性和类型属性，大小属性是字节序列中的字节总数，类型属性是由小写ASCII编码字符串表示的媒体类型字节序列。

Size:以字节为单位返回字节序列的大小。获取时，合格的用户代理必须返回可由文件读取器或文件读取器同步对象读取的字节总数，如果Blob没有可读取的字节，则返回0。Type:小写ASCII编码字符串表示媒体类型Blob。获取时，用户代理必须以小写形式返回类型A的ASCII编码字符串，以便在转换为字节序列时，它是可解析的MIME类型，或者是空字符串(0字节)。如果类型不确定。

构造器

创建blob对象本质上与创建另一个对象相同，后者是使用Blob()的构造函数创建的。构造函数接受两个参数：

第一个参数是数据序列，格式可以是arraybuffer、arraybufferview、blob、domstring。第二个参数是具有以下两个属性的对象

Type: MIME类型，endings:决定第一个参数的数据格式。默认值为“透明”，它指定如何写入包含行结束符n的字符串。它是以下两个值之一：“native”，这意味着行结束符将被更改为适用于主机操作系统文件系统的新行字符；“透明”，这意味着保存在blob中的终止符将保持不变。var data1=' avar blob1=新Blob([data 1])；console . log(blob 1)；//输出：blob {size : 1，type : ' ' } vardebug={ hello : ' world ' }；var Blob=new Blob([JSON . stringify(debug，null，2)]，{ type : ' application/JSON ' })；console . log(blob)//Output blob(22){ Size : 22，Type : ' Application/JSON ' }//创建8字节数组缓冲区。在上面，创建一个每个数组元素有2个字节的“视图”。var abf=new arraybuffer(8)var abv=new int 16 array(abf)var bolb _ arraybuffer=new blob(abv，{ type : ' text/plain ' })console . log(bolb _ arraybuffer)//output blob(4){ size : 4，type:' text/plain'} slice方法

Blob对象具有切片方法，该方法返回一个新的Blob对象，该对象包含源Blob对象中指定范围内的数据。

Slice(开始、结束、内容类型)start:可选，表示Blob中的下标，指示将被复制到新Blob中的第一个字节的开始位置。如果传入一个负数，偏移量将从数据的末尾从后向前计算。End:可选，它表示Blob的一个下标，与这个下标-1对应的字节将是复制到新Blob中的最后一个字节。如果您传入一个负数，偏移量将从数据的末尾从后向前计算。内容类型：可选，为新的Blob分配新的文档类型。这会将其类型属性设置为传入的值。它的默认值是一个空字符串。

var数据=' abcdefvar blob1=新Blob([数据])；var blob2=blob1.slice(0，3)；console . log(blob 1)；//输出：blob {size : 6，type : ' ' } console . log(blob 2)；//输出：blob {size : 3，type :''}切片用于文件片段上传

分片与并发相结合，将一个大文件分成多个块并发上传，大大提高了大文件的上传速度。当网络问题导致传输错误时，只需要重新传输错误的片段，而不是整个文件。此外，碎片传输可以实时跟踪上传进度。片段上传逻辑如下：

获取待上传文件的File对象，按照块(每块的大小)对文件进行切片，通过post方法循环上传每个文件，在url中拼接一个querystring来描述当前上传文件的信息；在帖子正文中存储要上传的二进制数据片段的接口在下次上传时返回偏移量

init上传()；//初始化上传函数initUpload(){ var chunk=100 * 1024；//每片大小var输入=文档。getelementbyid(' file ')；//输入文件输入。onchange=function(e){ var file=this。文件[0]；定义变量查询={ };var chunks=[]；if(！文件){ var start=0；//文件分片for(var I=0；数学。天花板(文件。大小/块)；I){ var end=start chunk；chunks[i]=file.slice(开始，结束);开始=结束；} //采用邮政方法上传文件//url查询上拼接以下参数，用于记录上传偏移//帖子正文中存放本次要上传的二进制数据query={ file size 3: file . size，dataSize: chunk，nextOffset: 0 }上传(组块、查询、SuccessPerupload)；} }}//执行上传函数上传(组块，查询，CB){ var queryStr=object。getowntpropertynames(查询).map(key={ return key '=' query[key]；}).join(' ')；var xhr=new XMLHttpRequest()；xhr.open('POST '，' http://xxxx/opload '？查询字符串)；xhr。overridemimetype('应用程序/八位字节流')；//获取邮件正文中二进制数据var指数=数学。楼层(查询。下一个偏移/查询。datasize)；getFileBinary(chunks[index])，function(binary){ if(xhr。sendas二进制){ xhr。sendas二进制(二进制)；} else { xhr.send(二进制);} });xhr。onreadystatechange=function(e){ if(xhr。readystate===4){ if(xhr。status===200){ var resp=JSON。解析(xhr。response text)；//接口返回next offset//resp={//is finish : false，//offset :100 * 1024/} if(CB的类型==' function '){ CB。调用(this，resp，chunks，query) } } } }}//每片上传成功后执行函数successPerUpload(resp，组块，查询){ if(resp。Isfinish===true){ alert('上传成功');} else { //未上传完毕查询。offset=resp。偏移；上传（组块、查询、成功上传);}}//获取文件二进制数据函数getFileBinary(file，CB){ var reader=new file reader()；reader.readAsArrayBuffer(文件);读者。onload=function(e){ if(CB的类型==' function '){ CB。叫(这个，这个。结果)；} }}Blob网址

一滴协议的全球资源定位器(统一资源定位符)使用时就像平时使用的全球资源定位器(统一资源定位符)一样，可以作为图片请求地址，也可以作为文件请求地址。格式：

blob:http://XXX

URL.createObjectURL(blob)创建链接URL.revokeObjectURL(网址)下面是一个下载文件的示例，直接调用即可实现文件下载

//文件是要下载的文件(blob对象)downloadHandler:函数（文件，文件名){ let link=document。创建元素(“a”)链接。href=窗口.URL.createObjectURL(文件)链接。下载=文件名链接。单击()窗口网址。revokeobjecturl(链接。href)if(导航器。用户代理。indexof(' Firefox ')-1){ const a=document。create element(' a ')a . add event listener(' click ')，function(e){ a . download=FIlename a . href=URL。createobjecturl(file)})让e=document。create event(' MouseEvents ')e . init event(' click '，false，false) a.dispatchEvent(e) }}在从后台获取的数据接口中把返回类型设置为一滴

var x=new XMlhttprequest()；x.responseType=' blob//返回一个一滴对象斑点网址和数据网址的区别

斑点网址

数据网址

斑点网址的长度一般比较短，但数据网址因为直接存储图片base64编码后的数据，往往很长，如上图所示，浏览器在显示数据网址时使用了省略号(…)。当显式大图片时，使用斑点网址能获取更好的可能性斑点网址可以方便的使用XMLHttpRequest获取源数据，比如设置XMLHttpRequest返回的数据类型为斑点网址只能在当前应用内部使用，把斑点网址复制到浏览器的地址栏中，是无法获取数据的数据网址相比之下，就有很好的移植性，可以在任意浏览器中使用。总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。