前端文件上传与下载攻略
本文目标：帮你快速掌握文件上传 & 下载的核心实现方式，并在常见出错场景下保持“优雅不崩溃”。
一、文件上传
1. 基础结构
<input type="file" id="fileInput" />
<button id="uploadBtn">上传</button>
2. 核心脚本
document.getElementById('uploadBtn').addEventListener('click', uploadFile);async function uploadFile () {const file = fileInput.files?.[0]; // ① 是否选择文件if (!file) return alert('请先选择文件！');const formData = new FormData();formData.append('file', file);try {const res = await fetch('/upload', { // ② 发请求method: 'POST',body: formData,});if (!res.ok) throw new Error(`HTTP ${res.status}`);const data = await res.json(); // ③ 处理业务结果alert(`上传成功：${data.filename}`);} catch (err) {console.error(err);alert(`上传失败：${err.message}`); // ④ 兜底提示}
}
⏳ 重点错误防护
- 未选文件：
if (!file) …。 - 网络/HTTP 错误：
!res.ok判定 & 抛错。 - 接口业务错误：后端自定义 code → 前端根据
data.code决策 UI。 - 超大文件 / 类型不符：后端校验 → 返回 413/415，前端同样走
!res.ok分支。
二、文件下载
场景 1：文件已存在静态 URL
<a href="/static/report.pdf" download="报告.pdf">下载报告</a>
场景 2：前端生成 / 动态获取文件
async function downloadDynamic () {try {// ① 拿到二进制（示例：后台生成 excel）const res = await fetch('/export/excel');if (!res.ok) throw new Error(`HTTP ${res.status}`);const blob = await res.blob(); // ② 转 blobconst url = URL.createObjectURL(blob); // ③ 临时链接// ④ 触发下载const a = document.createElement('a');a.href = url;a.download = 'data.xlsx';a.click();URL.revokeObjectURL(url); // ⑤ 释放内存} catch (err) {alert(`下载失败：${err.message}`);}
}
⚠️ 常见下载错误处理
| 错误场景 | 浏览器表现 | 前端防范思路 |
|---|---|---|
| 链接 404 / 403 | 浏览器提示/空白页 | !res.ok 捕获 + 友好提示 |
| 权限不足 | 返回 401/403 | 跳登录页或提示“无权限下载” |
| 内容空 / 后端异常 | 文件 0 B | blob.size === 0 时提示并中断 |
三、实战加分 Tips
- 进度条
const xhr = new XMLHttpRequest(); xhr.upload.onprogress = e => {if (e.lengthComputable) {const percent = (e.loaded / e.total) * 100;console.log(`已上传 ${percent.toFixed(1)}%`);} }; - 多文件并发上传：
Array.from(fileInput.files).map(f => formData.append('files', f))。 - 拖拽上传：监听
dragover / drop，获取event.dataTransfer.files。 - 断点续传：结合
Content-Range+ 后端分片合并。 - 安全防护：
- 前端白名单校验 MIME / 后缀。
- token/签名防盗链。
- HTTPS 保障传输安全。
四、结语
实现文件上传与下载并不难，难的是在各种异常面前稳如老狗。
- 上传要三查：文件、网络、后端业务。
- 下载要三稳：合法链接、正确权限、完整内容。
