Blob URL File FileReader ArrayBuffer 之间的关系

Blob URL File FileReader ArrayBuffer 之间的关系

1、Blob

Blob（Binary Large Object）表示二进制类型的大对象，通常是影像、音频、文本等多媒体文件；在 javascript 中，Blob 类型的对象是不可改变的原始数据

语法： new Blob(blobParts, option)

示例

// 基本示例
 const helloWorld = new Blob(["hello", " world"], {
     type: "text/plain",
     endings: "transparent",
 });
 console.log(helloWorld); // Blob {size: 11, type: 'text/plain'}
 
// 分片上传
 function handle(blob, chunkSize, upload) {
     const size = blob.size;
     let start = 0,
         end = chunkSize;
     while (start < size) {
         upload(blob.slice(start, end, "text/plain"));
         start = end;
         end = start + chunkSize;
     }
 }
 // 每次上传 4 
 handle(helloWorld, 4, (chunk) => console.log(chunk));

2、 URL

Blob URL 是一种伪协议，浏览器内部为每个 Blob URL 存储了一个 URL → Blob 的映射，如果这个映射不存在了，则会从浏览器中收到 404 错误；因此，此类 URL 较短，生成的 URL 仅在当前文档下才有效(个人理解是返回一个Blob 文件的映射url地址)
由于有映射关系的存在，Blob 无法释放；可以手动销毁映射，或关闭当前文档

const link = URL.createObjectURL(helloWorld);
const _link = URL.createObjectURL(helloWorld);
console.log(link); // blob:null/fffb6ef0-9a06-4503-b982-058929da566b
console.log(_link); // blob:null/cdbb625f-c99a-4d4e-bd10-70136f0d270a /* Blob URL 是随机的 */

/* 可以作为 a 标签的 link；如果是图片，也可以作为 img 的 src */

// 销毁 Blob URL；否则 Blob 得不到释放，会产生内存泄漏
URL.revokeObjectURL(link);
URL.revokeObjectURL(_link);

3、File

继承自 Blob new File(blobParts, name, option)

 // 创造一个 .txt 文件
const file = new File([helloVue], "test.txt", {
   type: "text/plain",
});

4、FileReader

用来读取 Blob，并转换为其他类型的数据
readAsArrayBuffer、readAsBinaryString、readAsDataURL、readAsText

示例

const reader = new FileReader();

reader.onload = function (e) {
    console.log(this.result); // hello vue
};
reader.readAsArrayBuffer(file);

5、ArrayBuffer

表示通用的、固定长度的原始二进制缓冲区, js操作二进制的方式

const buffer = new ArrayBuffer(4);
console.log(buffer); // ArrayBuffer(4)