前端二进制数据处理：Blob、File、ArrayBuffer等核心对象对比

在大型云存储系统中，合理选择二进制处理方案可使性能提升300%。本文将揭示Blob、File、ArrayBuffer这些对象的本质区别与实战用法。

---

一、核心概念快速解析

1. ArrayBuffer - 内存中的原始二进制缓冲区
2. Blob - 类文件对象的二进制容器
3. File - 继承Blob的增强版（添加文件名等元数据）
4. FileReader - 二进制数据读取器
5. Base64 - 二进制数据的文本化编码
6. URL.createObjectURL() - 临时文件访问链接生成器

---

二、实战中的关键对象对比

1. ArrayBuffer：原始的二进制数据

特点：

• 内存中的原始二进制缓冲区
• 无法直接操作，需通过视图对象（如TypedArray）处理
• 最适合处理纯数据（如图片解码）

// 从网络请求获取ArrayBuffer
fetch('image.png')
  .then(res => res.arrayBuffer())
  .then(buffer => {
    const view = new Uint8Array(buffer);
    console.log('前10字节:', view.slice(0, 10)); 
  });

---

2. Blob vs File：二进制容器兄弟

特性	Blob	File
来源	代码创建	用户上传/系统生成
元数据	type（MIME类型）	name, lastModified, type等
创建方式	new Blob([data], options)	<input type="file">获取
应用场景	切割大文件	文件上传

// Blob切片上传（适合大文件分块）
const blob = new Blob(['前端开发实战'], {type: 'text/plain'});
const chunk = blob.slice(0, 1024);  // 截取前1KB

// File获取（来自用户）
document.querySelector('input').addEventListener('change', e => {
  const file = e.target.files[0];
  console.log(`文件名: ${file.name}, 大小: ${file.size}字节`);
});

---

3. FileReader：二进制数据读取器

核心方法：

readAsText()      // 读取为文本
readAsDataURL()   // 读取为Base64字符串 
readAsArrayBuffer() // 读取为原始二进制

示例：图片转Base64预览

<input type="file" accept="image/*" id="avatar">

<script>
  document.getElementById('avatar').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const reader = new FileReader();
    
    reader.onload = (event) => {
      // 直接作为图片源使用（Base64编码）
      document.getElementById('preview').src = event.target.result;
    };
    
    reader.readAsDataURL(file);  // 关键操作
  });
</script>

---

三、Base64 vs ObjectURL：数据访问方案对比

1. Base64：二进制文本化方案

特点：

• 通过文本表示二进制数据
• 体积膨胀约33%
• 可直接嵌入HTML/CSS

// ArrayBuffer转Base64
const base64 = btoa(String.fromCharCode(...new Uint8Array(buffer)));

2. URL.createObjectURL()：零拷贝文件访问

优势：

• 不涉及数据复制
• 内存占用极低
• 自动引用计数管理

// 创建临时URL实现大文件预览
const file = document.getElementById('file').files[0];
const url = URL.createObjectURL(file); // 创建引用

// 使用（不加载完整数据）
img.src = url;

// 用完后必须释放！
URL.revokeObjectURL(url); 

3. 关键场景对比表

场景	Base64	ObjectURL
小图片预览	✅	✅
大文件预览	❌（内存溢出）	✅
PDF文件下载	❌（性能差）	✅
数据网络传输	✅（兼容性好）	❌
Worker线程处理	❌（复制开销大）	✅（共享引用）
Node.js环境	✅	❌

---

四、实战应用场景解析

场景1：图片压缩上传

// 1. 获取用户文件（File对象）
const fileInput = document.getElementById('upload');

// 2. 压缩图片（使用Canvas）
function compressImage(file) {
  return new Promise(resolve => {
    const img = new Image();
    img.src = URL.createObjectURL(file);  // 使用ObjectURL避免内存拷贝
    
    img.onload = () => {
      const canvas = document.createElement('canvas');
      // ... 省略压缩逻辑 ...
      canvas.toBlob(blob => resolve(blob), 'image/jpeg', 0.7);
    };
  });
}

// 3. 分片上传
async function upload() {
  const file = fileInput.files[0];
  const compressedBlob = await compressImage(file);
  
  // 切片处理（分块上传）
  const CHUNK_SIZE = 1 * 1024 * 1024; // 1MB
  for (let i = 0; i < compressedBlob.size; i += CHUNK_SIZE) {
    const chunk = compressedBlob.slice(i, i + CHUNK_SIZE);
    await api.uploadChunk(chunk);
  }
}

场景2：大文件断点续传

// 使用Blob.slice切割文件
const file = event.target.files[0];
const chunkSize = 5 * 1024 * 1024; // 5MB
const totalChunks = Math.ceil(file.size / chunkSize);

for (let i = 0; i < totalChunks; i++) {
  const start = i * chunkSize;
  const end = Math.min(start + chunkSize, file.size);
  const chunk = file.slice(start, end);  // 核心切割API
  
  uploadChunk(chunk, i, file.name)
    .then(() => console.log(`区块 ${i} 上传成功`));
}

---

五、浏览器差异与性能陷阱

1. Safari内存陷阱

   • URL.createObjectURL() 可能持有Blob引用
   • 解决方案：及时调用 URL.revokeObjectURL()

2. 移动端Base64崩溃

   • 安卓低端机上Base64大文件易引发OOM
   • 优先使用ObjectURL方案

3. IndexedDB存储优化

   // 错误：存储Base64字符串（膨胀1.3倍）
   db.store( {img: base64String} );
   
   // 正确：直接存储Blob（无膨胀）
   db.store( {img: blobObject}, 'blob');

---

六、现代API替代方案

1. Streams API：流式处理大文件

   // 流式上传文件（无需完整加载内存）
   const stream = file.stream();
   await fetch('/upload', { 
     method: 'POST',
     body: stream 
   });

2. Blob.arrayBuffer()：更简洁的二进制获取

   // 新版推荐（替代FileReader）
   const buffer = await blob.arrayBuffer();

---

小结

graph TD A[需要处理二进制数据] --> B{数据来源是?} B -->|用户文件| C[使用File对象] B -->|程序生成| D[使用Blob] C --> E{如何操作?} E -->|预览/下载| F[URL.createObjectURL] E -->|读取内容| G{数据大小} G -->|小文件| H[FileReader + Base64] G -->|大文件| I[Streams API或直接切片] D --> J{存储还是传输?} J -->|存储| K[indexedDB存Blob] J -->|HTTP传输| L[FormData发送Blob]

1. 小文件：Base64方便传输
2. 大文件：ObjectURL解决预览，Streams处理数据
3. 元数据敏感：优先使用File对象
4. 内存敏感场景：避免Base64，优先Blob引用