前言：二进制数据
二进制数据，大家都不陌生，我们从本地或者服务器下载文件之后，获取的数据就是二进制数据；
二进制数据，在iOS开发中，是NSData/Data类型；
那么在JavaScript中呢，二进制数据就是Blob类型；
一、Blob
Blob(Binary Large Object)术语最初来自数据库，早期数据库因为要存储声音、图片、以及可执行程序等二进制数据对象所以给该类对象取名为Blob。
Blob 对象表示一个不可变、原始数据的类文件对象。
我个人认为，Blob对象，就是一个文件对象，通过这个对象，我们可以获取这个文件的一系列其他值，例如文件的地址、文件的Base64等；
二、生成一个Blob对象
1. 构造函数
var blob = new Blob(array[optional], options[optional]);
构造函数，接受两个参数
第一个参数：为一个数据序列，可以是任意格式的值，例如，任意数量的字符串，Blobs 以及 ArrayBuffers。
第二个参数：用于指定将要放入Blob中的数据的类型(MIME)（后端可以通过枚举MimeType，获取对应类型：
例如：
var blob = new Blob(["Hello World!"],{type:"text/plain"});
2. 转化
可以根据其他类型数据(File)转化成Blob类型
三、Blob对象属性
*size ：Blob对象包含的字节数。(只读)
*type ： Blob对象包含的数据类型MIME，如果类型未知则返回空字符串。
四、Blob对象保存到本地
let blob = new Blob(['aaa, bbb']);
let fileName = 'test.text';
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
// IE浏览器
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
// Non-IE (chrome, firefox etc.)
let url = window.URL.createObjectURL(blob)
var link = document.createElement("a");
link.href = url;
link.download = decodeURI(fileName);
link.click();
window.URL.revokeObjectURL(link.href);
}
结果
五、Blob对象的实例方法
1. slice
创建一个包含源 Blob的指定字节范围内的数据的新 Blob 对象。
var blob1 = blob.slice([start [, end [, contentType]]]};
-
start：可选，表示被会被拷贝进新的 Blob 的字节的起始位置。如果传入的是一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。 -
end： 可选， end-1的对应的字节将会是被拷贝进新的Blob 的最后一个字节。如果传入了一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。 -
contentType： 可选 给新的 Blob 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。
例如：
let pblob = new Blob(['aaa, bbb']);
let blob = pblob.slice(2, 7)
结果
2. stream
返回一个ReadableStream对象，读取它将返回包含在Blob中的数据。
例如：
let stream = blob.stream()
截屏
3. text
返回一个 Promise 对象且包含 blob 所有内容的 UTF-8 格式的 USVString。
在JavaScript中返回时， USVString 映射到 String
例如：
blob.text().then(result => {
console.log(result, '----')
})
结果
4. arrayBuffer
返回一个 Promise 对象且包含 blob 所有内容的二进制格式的 ArrayBuffer。
例如：
blob.arrayBuffer().then(result => {
console.log(result, '----')
})
结果
六、类型转化
通过FileReader，可把Blob对象转化为其他类型（字符串，Base64，ArrayBuffer等）
网友评论