Javascript中的Blob对象详解

什么是Blob？

Blob（Binary Large Object）是 JavaScript 中用于处理二进制数据的对象。它表示一个不可变的、原始数据的类文件对象。简单来说，Blob 就是一个包含有二进制数据的容器。

Blob的基本用法

1. 创建Blob对象

// 方法1：使用构造函数
const blob = new Blob(['Hello World'], { type: 'text/plain' });

// 方法2：通过数组创建
const arr = ['Hello', ' ', 'World'];
const blob2 = new Blob(arr, { type: 'text/plain' });

2. Blob的主要属性

• size：Blob 对象的大小（字节）
• type：Blob 对象的 MIME 类型

const blob = new Blob(['Hello World'], { type: 'text/plain' });
console.log(blob.size);  // 11
console.log(blob.type);  // "text/plain"

Blob的常见应用场景

1. 文件下载

const blob = new Blob(['下载内容'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'file.txt';
a.click();
URL.revokeObjectURL(url);

2. 图片预览

// 假设input是一个文件输入框
input.addEventListener('change', function(e) {
    const file = e.target.files[0];
    const url = URL.createObjectURL(file);
    const img = document.createElement('img');
    img.src = url;
    document.body.appendChild(img);
    
    // 使用完后记得释放
    URL.revokeObjectURL(url);
});

3. 文件切片上传

const file = input.files[0];
const chunkSize = 1024 * 1024; // 1MB
const chunks = Math.ceil(file.size / chunkSize);

for(let i = 0; i < chunks; i++) {
    const chunk = file.slice(
        i * chunkSize, 
        Math.min((i + 1) * chunkSize, file.size)
    );
    // 上传chunk...
}

Blob与其他对象的关系

1. Blob vs File

File 对象是特殊类型的 Blob，除了 Blob 的属性外，File 对象还包含文件名、最后修改时间等信息。

2. Blob vs ArrayBuffer

• Blob：适合处理大文件
• ArrayBuffer：适合频繁操作二进制数据

实用技巧

1. Blob转换为Base64

const blob = new Blob(['Hello World'], { type: 'text/plain' });
const reader = new FileReader();
reader.onload = function(e) {
    console.log(e.target.result); // 输出base64字符串
};
reader.readAsDataURL(blob);

2. Blob转换为文本

const blob = new Blob(['Hello World'], { type: 'text/plain' });
const text = await blob.text();
console.log(text); // "Hello World"

注意事项

1. 使用 URL.createObjectURL() 后要及时调用 URL.revokeObjectURL() 释放内存
2. 处理大文件时考虑使用切片上传
3. 选择合适的 MIME 类型

总结

Blob 对象是处理二进制数据的强大工具，在文件处理、上传下载等场景中有广泛应用。合理使用 Blob 可以提高web应用的性能和用户体验。