JavaScript之Blob对象类型的具体使用方法

2023-08-05 05:53:03 63

Blob(BinaryLargeObject)术语最初来自数据库（oracle中也有类似的栏位类型。），早期数据库因为要存储声音、图片、以及可执行程序等二进制数据对象所以给该类对象取名为Blob。

在Web领域，Blob被定义为包含只读数据的类文件对象。Blob中的数据不一定是js原生数据形式。常见的File接口就继承自Blob，并扩展它用于支持用户系统的本地文件。

构建一个Blob对象通常有三种方式：

通过Blob对象的构造函数来构建。
从已有的Blob对象调用slice接口切出一个新的Blob对象。
canvasAPItoBlob方法，把当前绘制信息转为一个Blob对象。下面只看第一种的实现：

用法：新方法创建Blob对象（构造函数来构建）

varblob=newBlob(array[optional],options[optional]);

构造函数，接受两个参数

第一个参数：为一个数据序列，可以是任意格式的值，例如，任意数量的字符串，Blobs以及ArrayBuffers。

第二个参数：用于指定将要放入Blob中的数据的类型(MIME)（后端可以通过枚举MimeType，获取对应类型：

MimeTypemimeType=MimeType.toEnum(file.getContentType());）。

Blob对象的基本属性：

size：Blob对象包含的字节数。(只读)
type： Blob对象包含的数据类型MIME，如果类型未知则返回空字符串。

原生对象构建Blob


window.onload=function(){
varblob=newBlob(1234);
}

提示出错：

UncaughtTypeError:Failedtoconstruct‘Blob':The1stargumentisneitheranarray,nordoesithaveindexedproperties.

原因在于Blob构造函数要求第一个参数必须是数组，而这里第一个参数既不是一个数组，也没有可索引的属性。既然这里提到了对象的可索引属性，让我联想到了类数组的概念，而Arguments就是一个很好的例子。来试一试：


functiontestArgumentsBlob(){
varblob=newBlob(arguments);
console.log(blob.size);//3
console.log(blob.type);//""
}
window.onload=function(){
testArgumentsBlob(1,2,3);
}

可以看到即使是类数组对象，而数组元素类型是Number也能得出正确的结论，猜想大概是由于构造函数内部把Number转化为String的缘故吧！

再来试一试其他的参数类型：

window.onload=function(){
vararg={hello:"2016"};
varblob=newBlob([JSON.stringify(arg,null,"\t")],{type:"application/json"});
console.log(blob.type);//application/json
console.log(blob.size);//20
}

blob.type等于application/json没问题。arg转为字符串后的长度为16加上制表符\t的宽度4个字节等于20。

Blob对象的基本方法：

大文件分割(slice()方法)，slice方法与数组的slice类似。

Blob.slice([start,[end,[content-type]]])

slice()方法接受三个参数，起始偏移量，结束偏移量，还有可选的mime类型。如果mime类型，没有设置，那么新的Blob对象的mime类型和父级一样。

当要上传大文件的时候，此方法非常有用，可以将大文件分割分段，然后各自上传，因为分割之后的Blob对象和原始的是独立存在的。

不过目前浏览器实现此方法还没有统一，火狐使用的是mozSlice()，Chrome使用的是webkitSlice()，其他浏览器则正常的方式slice()

可以写一个兼容各浏览器的方法：

functionsliceBlob(blob,start,end,type){
type=type||blob.type;
if(blob.mozSlice){
returnblob.mozSlice(start,end,type);
}elseif(blob.webkitSlice){
returnblob.webkitSlice(start,endtype);
}else{
thrownewError("Thisdoesn'twork!");
}
}

利用Blob显示缩略图`

varinput=document.createElement("input");
input.type="file";
input.accept="image/*";
input.multiple=true;
input.style.display="none";
document.body.appendChild(input);

varfileSelect=document.createElement("a");
fileSelect.href="#";
fileSelect.appendChild(document.createTextNode("Choosefiles"));
document.body.appendChild(fileSelect);

varimgList=document.createElement("div");
imgList.innerHTML="NofileSelected!"
document.body.appendChild(imgList);

input.addEventListener("change",function(e){
varfiles=this.files;
if(!files.length){
return;
}
imgList.innerHTML="";
varlist=document.createElement("ul");
imgList.appendChild(list);
for(vari=0;i
由于File对象继承自Blob,所以我们可以很方便的利用File对象加载本地系统图片文件，并通过createObjectURL生成一个URL并加以显示。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

JavaScript之Blob对象类型的具体使用方法

热门推荐

随机推荐