前端文件操作之【上传篇】

和下载一样，文件上传也是前端应用里极其常见的需求。无论是上传头像、提交文档，还是批量传输大文件，前端都有多种姿势可以选择。下面我们从基础到进阶，逐步拆解。

---

1. <input type="file"> + 表单提交 —— 最传统的方式

这是最简单的上传方式，借助浏览器原生的表单能力。

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file" />
  <button type="submit">上传</button>
</form>

优点：实现最简单。
缺点：页面会刷新，交互体验差。

---

2. FormData + Fetch / XHR —— 最常用的异步上传

通过 FormData 封装文件，再用 fetch 或 XHR 发请求。

const input = document.querySelector('#fileInput');
const formData = new FormData();
formData.append('file', input.files[0]);

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

优点：支持异步上传，用户体验好。
缺点：需要后端配合解析 multipart/form-data。

---

3. 拖拽上传 —— 提升体验的小技巧

通过监听 dragover 和 drop 事件，可以实现拖拽文件上传。

dropArea.addEventListener('drop', e => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  // 上传 files
});

优点：交互体验好，适合图片/资料上传场景。
缺点：需要额外的交互引导。

---

4. Base64 上传 —— 特殊场景

有时后端不方便处理文件流，可以先将文件转成 Base64，再传字符串。

const reader = new FileReader();
reader.onload = () => {
  fetch('/upload', {
    method: 'POST',
    body: JSON.stringify({ data: reader.result })
  });
};
reader.readAsDataURL(file);

优点：实现简单，适合小文件。
缺点：体积增大 ~33%，性能差，不适合大文件。

---

5. 分片上传 + 断点续传 —— 大文件必备

将大文件切分为小块，逐块上传，服务端再合并。

优点：大文件上传更稳定，可支持断点续传。
缺点：实现复杂，需要前后端配合。

---

总结

• 小文件 → 表单提交 / FormData + fetch
• 更好体验 → 拖拽上传
• 特殊场景 → Base64
• 大文件 → 分片上传

---

👉 下一篇我们将进入 导出篇：教你如何把数据转换成文件，生成 CSV、Excel、PDF 等不同格式。