前端文件处理：File、Blob与Base64转换实战

1. 前端文件处理的核心场景与痛点

在Web开发中，文件处理是每个前端工程师都绕不开的实战场景。从用户上传头像到导出Excel报表，从图片预览到加密文件传输，文件在不同形态间的转换直接决定了用户体验的流畅度。我处理过最复杂的案例是一个医疗影像系统，需要在浏览器端完成DICOM文件解析、缩略图生成和Base64加密传输整套流程，这让我深刻认识到文件处理技术栈的重要性。

前端文件处理的本质是数据形态的转换。用户上传的是File对象，服务器可能要求Base64编码，而某些API又需要Blob格式。这三种类型的特性差异明显：

• File对象包含完整的文件元信息（name/lastModified等）
• Blob是二进制数据的容器
• Base64则是可读的字符串表示形式

2. 文件处理三剑客深度解析

2.1 File对象的实战应用

File对象继承自Blob，通常在<input type="file">中获取。实战中这几个属性最常用：

javascript复制document.getElementById('upload').addEventListener('change', (e) => {
  const file = e.target.files[0];
  console.log({
    name: file.name,       // 文件名带扩展名
    size: file.size,       // 字节数
    type: file.type,       // MIME类型
    lastModified: file.lastModified 
  });
});

重要提示：Safari浏览器中，通过拖拽获取的File对象可能缺少lastModified属性，需要做兼容处理。

我推荐使用FileReader处理文件读取，它有四种读取方式：

javascript复制const reader = new FileReader();
reader.readAsText(file);     // 文本文件
reader.readAsDataURL(file);  // Base64
reader.readAsArrayBuffer(file); // 二进制缓冲
reader.readAsBinaryString(file); // 已废弃

reader.onload = () => {
  console.log(reader.result);
};

2.2 Blob操作的黑科技

Blob的构造函数非常灵活：

javascript复制const blob = new Blob([JSON.stringify({key: 'value'})], {
  type: 'application/json'
});

实际项目中我常用这些技巧：

1. 大文件分片上传：

javascript复制const CHUNK_SIZE = 1024 * 1024; // 1MB
let offset = 0;
const chunks = [];

while (offset < file.size) {
  chunks.push(file.slice(offset, of