每天一个前端小知识 Day 30 - 前端文件处理与浏览器存储机制实践

前端文件处理与浏览器存储机制实践

---

🎯 一、文件处理为何重要？

现代 Web 应用中文件处理场景非常广泛：

• 上传头像/简历/Excel 等文件
• 图片压缩、预览、转码（Base64、Blob）
• 大文件切片上传与断点续传
• 读取本地文件内容（如 .csv、.xlsx）
• 下载文件并自动命名

这些场景都考验前端对浏览器 File API、Blob、FormData、Storage API 等底层能力的掌握。

---

🧠 二、浏览器文件处理 API 一览

API	作用
File	文件对象（通常来源于 <input type="file">）
FileReader	读取文件内容为文本、URL、ArrayBuffer
Blob	二进制数据对象，常用于生成文件下载
FormData	构建带文件的 multipart/form-data 请求
URL.createObjectURL()	创建 blob 链接用于图片预览、下载等

---

📂 三、文件上传：获取 + 预览 + 上传流程

1️⃣ 获取文件对象

<input type="file" id="fileInput" />

const input = document.getElementById('fileInput');
input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  console.log('文件名:', file.name);
});

2️⃣ 图片预览：使用 Blob URL

const imgUrl = URL.createObjectURL(file);
document.getElementById('preview').src = imgUrl;

✅ 别忘了销毁 URL，避免内存泄漏：

URL.revokeObjectURL(imgUrl);

3️⃣ 上传文件：使用 FormData

const formData = new FormData();
formData.append('file', file);

fetch('/api/upload', {
  method: 'POST',
  body: formData
});

---

✂️ 四、大文件分片上传 + 秒传机制

📦 为什么要切片上传？

• 避免大文件拖慢上传速度甚至失败
• 支持断点续传、重试机制
• 支持秒传（MD5 检测已有文件）

🧩 分片核心思路：

const chunkSize = 1 * 1024 * 1024; // 1MB
const file = input.files[0];
const chunks = [];

for (let i = 0; i < file.size; i += chunkSize) {
  chunks.push(file.slice(i, i + chunkSize));
}

每一片上传时携带 fileId + chunkIndex，后端完成后再合并切片。

---

📤 五、浏览器文件下载机制（Blob 下载）

const blob = new Blob(['Hello world'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

const a = document.createElement('a');
a.href = url;
a.download = 'hello.txt';
a.click();

URL.revokeObjectURL(url);

✅ 可下载后端返回的二进制流（如 Excel、PDF 等）：

fetch('/api/export')
  .then(res => res.blob())
  .then(blob => {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'report.xlsx';
    link.click();
  });

---

🗃 六、浏览器本地存储机制对比

存储方式	容量限制	特点	应用场景
localStorage	~5MB	同源永久存储，页面刷新不丢失	保存用户设置、登录状态
sessionStorage	~5MB	同源 + 同窗口，关闭即失效	临时状态保存（如表单草稿）
IndexedDB	上限为硬盘容量	支持对象存储、索引、事务	本地缓存海量数据、离线图书馆
cookie	~4KB	每次请求自动带上，支持跨域设置	会话状态、权限管理

---

🛠 七、存储常见技巧

✅ 本地存储封装工具

const Storage = {
  get(key: string) {
    try {
      return JSON.parse(localStorage.getItem(key) || '');
    } catch {
      return null;
    }
  },
  set(key: string, value: any) {
    localStorage.setItem(key, JSON.stringify(value));
  },
  remove(key: string) {
    localStorage.removeItem(key);
  }
};

---

🧪 八、面试高频问题拆解

📌 Q1：文件上传为什么要用 FormData？可以用 JSON 吗？

答：FormData 支持构建 multipart/form-data 类型请求，适用于文件上传。而 JSON 无法直接包含 File 或二进制数据，需手动处理转码和边界，效率低下。

📌 Q2：如何实现大文件分片上传与断点续传？

答：

• 使用 slice() 方法按固定大小分片；
• 每一片上传携带标识（fileId, chunkIndex）；
• 后端提供合并接口；
• 可将已上传片段记录到本地/IndexedDB 以支持断点续传。

📌 Q3：localStorage 和 IndexedDB 区别？

对比点	localStorage	IndexedDB
数据结构	键值对（字符串）	支持对象、索引、事务控制
容量	几 MB	GB 级别
异步	否	是（支持 Promise 接口）
应用	简单用户设置、缓存小内容	离线缓存系统、图片、文件、日志

---

✅ 总结

技术点	关键要素
文件处理	获取 File、预览 Blob、读取 FileReader
大文件上传	切片 + 合并 + 秒传识别（MD5）
本地存储	localStorage / session / IndexedDB
文件下载	Blob + URL.createObjectURL

掌握这些底层浏览器 API 的应用，不仅能提升你的业务实现能力，也是在面试中体现"基础扎实 + 能解决真实问题"的重要体现。