浏览器 File API 深度解析：本地文件处理的隐私架构

浏览器文件处理的演进

早期 Web 应用处理文件依赖 <input type="file"> + 表单上传到服务器。2010 年后，HTML5 File API 让 JavaScript 可以直接读取用户本地文件——无需上传。

这一变革催生了「浏览器本地工具」品类：PDF 编辑、图片压缩、视频转码全部在用户设备上完成，文件永不离开浏览器。

---

核心 API 层次

File (用户选择的文件，含 name/size/type/lastModified)
  ↓ extends
Blob (二进制大对象，含 size/type)
  ↓ 读取为
ArrayBuffer (原始字节，适合 WASM/加密)
  ↓ 或
Text (UTF-8 字符串，适合 JSON/CSV)
  ↓ 或
Data URL (Base64 编码，适合内联展示)
  ↓ 输出为
Blob → Object URL → 下载 / 预览

File vs Blob

// File 是 Blob 的子类，多了文件名和修改时间
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const file: File = e.target.files[0];
  console.log(file.name);         // "report.pdf"
  console.log(file.size);         // 2048576 (bytes)
  console.log(file.type);         // "application/pdf"
  console.log(file.lastModified); // 1717200000000
});

读取方式对比

方法	返回类型	适用场景	内存特点
file.text()	string	JSON、CSV、文本	全量加载
file.arrayBuffer()	ArrayBuffer	PDF、图片、WASM 输入	全量加载
file.stream()	ReadableStream	大文件流式处理	分块读取
FileReader.readAsDataURL()	Data URL	图片预览	Base64 膨胀 33%

工具库的策略：< 50MB 用 arrayBuffer()，> 50MB 用 stream() 分块处理。

---

Object URL：零拷贝预览与下载

// 创建临时 URL（内存引用，非磁盘文件）
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);

// 用于预览
iframe.src = url;

// 用于下载
const a = document.createElement('a');
a.href = url;
a.download = 'merged.pdf';
a.click();

// ⚠️ 必须释放，否则内存泄漏
URL.revokeObjectURL(url);

Object URL 是 blob: 协议的特殊 URL，指向内存中的 Blob 对象。每个未 revoke 的 URL 都会占用内存——批量处理时必须及时释放。

---

拖拽上传的实现

const dropZone = document.getElementById('drop-zone');

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault(); // 必须阻止，否则浏览器会打开文件
  e.dataTransfer.dropEffect = 'copy';
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  const files = Array.from(e.dataTransfer.files);
  const pdfs = files.filter(f => f.type === 'application/pdf');
  processFiles(pdfs);
});

DataTransfer.files 返回 FileList，与 <input type="file"> 的 files 属性完全兼容。

---

隐私架构：为什么本地处理更安全

传统在线工具的数据流

用户文件 → HTTPS 上传 → 服务器处理 → 下载结果 → 服务器删除（声称）
                                    ↑
                              可能被缓存、日志、备份

工具库的数据流

用户文件 → File API 读取 → 浏览器内存/WASM 处理 → Blob 下载
                ↑
          永不离开用户设备

对比维度	服务器处理	浏览器本地处理
文件传输	需要上传+下载	零网络传输
隐私风险	服务器可能留存	关闭标签页即清除
速度	受网速限制	仅受 CPU 限制
文件大小	通常 10-50MB 限制	受设备内存限制
离线可用	否	是（PWA 缓存后）

---

Streams API：处理超大文件

对于超过 500MB 的视频文件，全量加载到 ArrayBuffer 可能导致 OOM：

async function processLargeFile(file: File) {
  const stream = file.stream();
  const reader = stream.getReader();
  const chunks: Uint8Array[] = [];

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    chunks.push(value); // 每次只加载一个 chunk（通常 64KB）
  }

  const totalLength = chunks.reduce((sum, c) => sum + c.length, 0);
  const result = new Uint8Array(totalLength);
  let offset = 0;
  for (const chunk of chunks) {
    result.set(chunk, offset);
    offset += chunk.length;
  }
  return result;
}

FFmpeg.wasm 支持从 Uint8Array 写入虚拟文件系统，配合 Streams 可以处理数 GB 的视频——只要设备内存足够。

---

文件类型检测：MIME vs 魔数

File.type 来自操作系统扩展名映射，不可靠：

// ❌ 用户可以将 .exe 重命名为 .pdf
file.type === 'application/pdf' // 可能为 true，但实际不是 PDF

// ✅ 读取文件头魔数
const header = new Uint8Array(await file.slice(0, 5).arrayBuffer());
const isPdf = header[0] === 0x25 && header[1] === 0x50 &&
              header[2] === 0x44 && header[3] === 0x46; // %PDF

工具库的 文件类型嗅探工具 就是基于魔数检测，比扩展名更准确。

---

下载最佳实践

触发下载

function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

批量下载：ZIP 打包

多个文件不应逐个触发下载（浏览器会阻止弹窗）。工具库使用 JSZip 将多个结果打包为一个 ZIP：

PDF 转图片 → 50 张 PNG → JSZip 打包 → 下载 images.zip

---

总结

File API 是浏览器本地工具的技术基石。理解 File → Blob → ArrayBuffer 的转换链、Object URL 的生命周期管理、以及 Streams 的大文件处理策略，是构建隐私优先 Web 工具的核心能力。工具库 200+ 工具全部基于这套架构，实现了「文件不上传、处理在本地、关闭即清除」的隐私承诺。