Blob对象全称为Binary Large Object，是JavaScript中用于表示不可变的原始二进制数据的类文件对象，它可以存储文本、图片、视频等各类数据，是前端处理二进制数据的核心对象之一。
Blob对象的基础属性
Blob对象包含两个核心只读属性，我们可以通过这两个属性获取Blob数据的基本信息：
- size：表示Blob对象所包含数据的字节大小
- type：表示Blob对象所包含数据的MIME类型，比如文本类型为text/plain，图片类型为image/png，如果类型未知则为空字符串
创建Blob对象
我们可以通过Blob构造函数来创建Blob对象，构造函数的语法如下：
// Blob构造函数接收两个参数 // 第一个参数是由ArrayBuffer、ArrayBufferView、Blob、DOMString等对象构成的数组，表示要放入Blob的数据 // 第二个参数是可选的配置对象，可设置type等属性 const blob = new Blob(array, options);
下面是一个创建文本类型Blob对象的示例：
// 创建一个包含文本内容的Blob对象，指定MIME类型为纯文本
const textBlob = new Blob(['这是一段测试文本'], { type: 'text/plain' });
console.log(textBlob.size); // 输出：18（每个中文字符占2字节，6个中文+6个标点共12？不对，实际UTF-8下中文是3字节，这里示例仅作演示）
console.log(textBlob.type); // 输出：text/plain
读取Blob对象内容
Blob对象本身不提供直接读取内容的方法，我们通常需要借助FileReader对象或者Response对象来读取它的内容。
使用FileReader读取Blob
FileReader是专门用于读取File或Blob对象内容的API，支持将内容读取为多种格式：
const blob = new Blob(['Hello Blob'], { type: 'text/plain' });
const reader = new FileReader();
// 读取为文本格式
reader.readAsText(blob);
reader.onload = function() {
console.log(this.result); // 输出：Hello Blob
};
// 也可以读取为DataURL格式
const reader2 = new FileReader();
reader2.readAsDataURL(blob);
reader2.onload = function() {
console.log(this.result); // 输出：data:text/plain;base64,SGVsbG8gQmxvYg==
};
使用Response读取Blob
Response是Fetch API的一部分，也可以直接接收Blob对象，通过它的方法读取内容：
const blob = new Blob(['测试内容'], { type: 'text/plain' });
const response = new Response(blob);
// 读取为文本
response.text().then(text => {
console.log(text); // 输出：测试内容
});
// 也可以读取为ArrayBuffer
response.arrayBuffer().then(buffer => {
console.log(new Uint8Array(buffer)); // 输出对应的字节数组
});
Blob对象的常见使用场景
场景1：前端生成文件并下载
我们可以通过Blob对象生成文件内容，再结合URL.createObjectURL方法创建下载链接，实现前端文件下载：
// 生成CSV文件内容
const csvContent = '姓名,年龄,性别n张三,20,男n李四,22,女';
const csvBlob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
// 创建下载链接
const downloadUrl = URL.createObjectURL(csvBlob);
const link = document.createElement('a');
link.href = downloadUrl;
link.download = '用户信息.csv';
// 触发点击下载
link.click();
// 释放URL对象，避免内存泄漏
URL.revokeObjectURL(downloadUrl);
场景2：图片预览
当用户上传图片文件时，我们可以通过FileReader或者URL.createObjectURL将File对象（File是Blob的子类）转换为可预览的URL：
// 假设页面有一个文件输入框<input type="file" id="fileInput">和一个图片预览标签<img id="previewImg">
const fileInput = document.getElementById('fileInput');
const previewImg = document.getElementById('previewImg');
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
// 将File对象转换为预览URL
const imgUrl = URL.createObjectURL(file);
previewImg.src = imgUrl;
// 图片加载完成后释放URL
previewImg.onload = function() {
URL.revokeObjectURL(imgUrl);
};
}
});
场景3：分片上传大文件
处理大文件上传时，我们可以将大文件对应的Blob对象通过slice方法切割成多个小Blob分片，分别上传：
function splitFile(file, chunkSize = 1024 * 1024) { // 默认分片大小1MB
const chunks = [];
let start = 0;
while (start < file.size) {
// slice方法切割Blob，返回新的Blob对象
const chunk = file.slice(start, start + chunkSize);
chunks.push(chunk);
start += chunkSize;
}
return chunks;
}
// 使用示例
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const chunks = splitFile(file, 2 * 1024 * 1024); // 2MB分片
console.log(`文件被分为${chunks.length}个分片`);
// 后续可以遍历chunks分别上传
}
});
Blob对象与File对象的区别
很多开发者会混淆Blob和File对象，两者的关系如下：
| 对比项 | Blob对象 | File对象 |
|---|---|---|
| 数据来源 | 可以通过构造函数手动创建，也可以来自其他二进制数据 | 通常来自用户上传的文件或者拖拽的文件，是Blob的子类 |
| 额外属性 | 只有size和type两个属性 | 除了size和type，还有name（文件名）、lastModified（最后修改时间）等属性 |
| 使用场景 | 用于处理任意二进制数据，比如生成文件、处理数据流 | 专门用于处理用户本地的文件 |
注意事项
- 通过URL.createObjectURL创建的URL对象会占用内存，使用完成后一定要及时调用URL.revokeObjectURL释放，避免内存泄漏
- Blob对象是不可变的，一旦创建就无法修改其内容，如果需要修改数据，只能创建新的Blob对象
- 当处理大Blob数据时，尽量避免一次性读取全部内容到内存，可以采用分片或者流式处理的方式
Blob对象JavaScript二进制数据文件操作修改时间：2026-06-16 01:57:35