BLOB:
BLOB,二进制大对象,是一个可以存储二进制文件的容器。
在计算机中,BLOB常常是数据库中用来存储二进制文件的字段类型。
BLOB是一个大文件,典型的BLOB是一张图片或一个声音,由于它们的尺寸,必须使用特殊的方式来处理(例如:上传、下载或者存放到一个数据库)。
它也可能引发一些问题,如存储的二进制文件过大,会使数据库的性能下降。在数据库中存放体积较大的多媒体对象就是应用程序处理BLOB的典型例子。
**在Web领域,Blob被定义为包含只读数据的类文件对象。**Blob中的数据不一定是js原生数据形式。常见的File接口就继承自Blob,并扩展它用于支持用户系统的本地文件。
构建一个Blob对象通常有三种方式:
1.通过BLOB对象的构造函数来创建。
2.从已有的Blob对象调用slice接口切出一个新的Blob对象。
3.canvas API toBlob 方法,把当前绘制信息转换为一个Blob对象。
方法一:构造函数来构建
var blob = new Blob(array[optional], options[optional]);
构造函数,接受两个参数
第一个参数:为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers。
第二个参数:用于指定将要放入Blob中的数据的类型(MIME)(后端可以通过枚举MimeType,获取对应类型:
MimeType mimeType = MimeType.toEnum(file.getContentType());)。
例:
<script>
var blob = new Blob(["Hello World!"],{type:"text/plain"});
</script>
第一种:创建一个装填DOMString对象的blob对象
第二种:创建一个装填ArrayBuffer对象的Blob对象
第三种:创建一个装填ArrayBufferView对象的Blob对象(ArrayBufferView可基于ArrayBuffer创建,返回值是一个类数组。如下,创建一个8字节的ArrayBuffer,在其上创建一个每个数组元素为2字节的“视图”)
Blob对象的基本属性:
size :Blob对象包含的字节数。(只读)
type : Blob对象包含的数据类型MIME,如果类型未知则返回空字符串。
方法二:
大文件分割 (slice() 方法),slice方法与数组的slice类似。
Blob.slice([start, [end, [content-type]]])
slice() 方法接受三个参数,起始偏移量,结束偏移量,还有可选的 mime 类型。如果 mime 类型,没有设置,那么新的 Blob 对象的 mime 类型和父级一样。
当要上传大文件的时候,此方法非常有用,可以将大文件分割分段,然后各自上传,因为分割之后的 Blob 对象和原始的是独立存在的。
不过目前浏览器实现此方法还没有统一,火狐使用的是 mozSlice() ,Chrome 使用的是 webkitSlice() ,其他浏览器则正常的方式 slice()
可以写一个兼容各浏览器的方法:
function sliceBlob(blob, start, end, type) {
type = type || blob.type;
if (blob.mozSlice) {
return blob.mozSlice(start, end, type);
} else if (blob.webkitSlice) {
return blob.webkitSlice(start, end type);
} else {
throw new Error("This doesn't work!");
}
}
例:
方法三:通过canvas.toBlob()
var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob){
console.log(blob);
});
使用 Blob 创建一个指向类型化数组的URL
var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'}); // 传入一个合适的 MIME 类型
var url = URL.createObjectURL(blob);
从 Blob 中提取数据
从Blob中读取内容的唯一方法是使用 FileReader。以下代码将 Blob 的内容作为类型数组读取:
var reader = new FileReader();
reader.addEventListener("loadend", function() {
// reader.result 包含被转化为类型数组 typed array 的 blob
});
reader.readAsArrayBuffer(blob);
注:下载文件或图片可以直接使用a链接
const link = document.createElement('a');
link.style.display = 'none';
link.href = url;
document.body.appendChild(link);
link.click();