前端开发早Yi不再是简单的“画页面”。我们每天dou在和各种各样的数据打交道，而其中Zui让人头疼，也Zui容易出问题的，莫过于文件的上传与下载。你是否遇到过用户抱怨上传大文件时页面卡死？或者因为兼容性问题导致某些浏览器无法正常预览图片？别担心，今天我们就来彻底扒一扒前端文件上传的那些事儿，不讲枯燥的理论，只聊实战中那些真正Neng帮到你的干货。

说实话，选择一个合适的文件传输方案，真的不仅仅是写几行代码那么简单。这就像是一场博弈，你需要综合考虑hen多因素：文件到底有多大？用户的网络环境如何？需不需要照顾那些还在用老旧浏览器的“钉子户”？服务器Neng不Neng扛得住并发压力？每一个环节dou可Neng成为系统的瓶颈。Ru果你曾在这些问题上踩过坑，或者只是觉得“Neng用但说不清原理”，那么这篇文章正是为你准备的。

hen多时候，我们觉得上传简单，是因为我们习惯了使用现成的组件。比如Bootstrap的FileInput，这确实是一款强大的工具，尤其适合批量上传，界面也美观。但是作为资深开发者，我们不Neng只停留在“调包”的层面必须深入理解其背后的机制。

让我们回到Zui原始的起点。在Web开发中，前端给后端传输文件，Zui常见的格式就是二进制Blob或者Base64。而当我们使用标准的表单提交时浏览器其实悄悄帮我们Zuo了hen多事。

Zui经典的方式莫过于使用 FormData。这玩意儿简直是现代前端上传的神器。你不需要自己去拼接那些复杂的请求头，浏览器会自动将请求编码为 multipart/form-data 格式，并设置好 boundary。kan下面这段代码，是不是hen眼熟？

const fd = new FormData
fd.append
fd.append
const res = await fetch('/api/upload', {
  method: 'POST',
  body: fd,
})
if  {
  const data = await res.json
  console.log
}

这里有个细节值得注意：当你把 FormData 丢给 fetch 的 body 时千万别手动去设置 Content-Type 为 multipart/form-data。一旦你手贱加了浏览器就不知道怎么填那个 boundary 了服务器解析起来就会报错。这一点，新手特别容易踩雷。

当然Ru果你不想用 FormData，想走极简路线，直接上传二进制流也是Ke以的。这种方式省去了 multipart 的解析开销，直接把文件“裸奔”过去。不过这就要求后端也得配合，不Neng按常规套路出牌了。

const res = await fetch('/api/upload', {
  method: 'POST',
  headers: {
    'Content-Type': file.type || 'application/octet-stream',
    'X-Filename': encodeURIComponent,
  },
  body: file,
})

现在的用户dou被惯坏了让他们去点那个小小的“选择文件”按钮，简直是在考验他们的耐心。为了提升交互体验，拖拽上传和粘贴上传成了标配。

直接把文件拖进页面这感觉多顺畅啊！实现起来其实也不难，核心就在于监听 drop 事件。但是要注意，你必须先阻止 dragover 的默认行为，否则浏览器会直接把文件打开，而不是交给你处理。

  Drop files here

对于截图党来说Ctrl+V 粘贴上传简直是福音。想象一下用户刚截了一张图，直接在你的页面里一按，上传就开始了这多爽！这需要我们监听 paste 事件，并从剪贴板里把文件“抠”出来。

在此页面 Ctrl / Cmd + V 粘贴文件

Web技术的进化速度真是让人咋舌。现在的浏览器不仅Neng让你传文件，还Neng直接调用摄像头、麦克风，甚至读写你本地硬盘的文件。

有些场景下比如人脸识别或者即时拍照，不需要用户先拍再选。我们Ke以直接用 getUserMedia 拉起摄像头，然后用 ImageCapture 截图。这技术感瞬间就上来了对吧？

打开摄像头
截图

这可是个重头戏。虽然目前还是实验性功Neng，但它的潜力巨大。它允许网页直接请求访问用户的文件系统，读取、写入甚至保存文件。这完全打破了传统网页的沙盒限制。

打开文件
保存文件

前端唱戏，还得后端搭台。在Node.js中，处理文件上传通常有两种流派：Buffer派和Stream派。

Ru果是小文件，直接读成Buffer扔回去，简单粗暴。但Ru果是大文件，同步读取会把内存撑爆，这时候必须用流式传输。HTTP/1.1 默认支持分块传输 Transfer-Encoding: chunked，这样不需要提前知道 Content-Length，服务器一边读一边发，浏览器一边收一边存，内存压力瞬间小hen多。

// 流式传输示例
const fs = require;
// ... 在路由处理中
ctx.body = fs.createReadStream;
// 浏览器会自动处理流，不需要你操心

这里有个小坑，HTTP/2 因为有多路复用和数据帧机制，它自己知道什么时候传输结束，所以反而不太支持 chunked 这种老古董了。这也是我们在Zuo协议升级时需要注意的细节。

有上传就有下载。有时候我们需要让用户下载前端生成的报表，或者Canvas绘制的图片。

这是Zui常用的手段。把二进制数据包装成 Blob，然后生成一个临时的 URL，赋给 标签，模拟点击。记得用完要 revokeObjectURL，不然内存泄漏了找谁说理去？

下载文本

下载 canvas 图片

Ru果是下载服务端的资源，Zui简单的就是 。但要注意，Ru果服务端返回的响应头里包含了 Content-Disposition: attachment; filename="xxx.jpg"，那么浏览器会优先听服务端的，你前端 download 属性写的名字可Neng就无效了。这也是hen多开发者困惑“为什么我改了文件名没反应”的原因。