企业网站营销典型案例网站建设大概需要多少钱

前端文件上传与下载攻略

本文目标：帮你快速掌握文件上传 & 下载的核心实现方式，并在常见出错场景下保持“优雅不崩溃”。

---

一、文件上传

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}`);          // ④ 兜底提示}
}

⏳ 重点错误防护

1. 未选文件：if (!file) …。
2. 网络/HTTP 错误：!res.ok 判定 & 抛错。
3. 接口业务错误：后端自定义 code → 前端根据 data.code 决策 UI。
4. 超大文件 / 类型不符：后端校验 → 返回 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

1. 进度条

   const xhr = new XMLHttpRequest();
   xhr.upload.onprogress = e => {if (e.lengthComputable) {const percent = (e.loaded / e.total) * 100;console.log(`已上传 ${percent.toFixed(1)}%`);}
   };
   

2. 多文件并发上传：Array.from(fileInput.files).map(f => formData.append('files', f))。
3. 拖拽上传：监听 dragover / drop，获取 event.dataTransfer.files。
4. 断点续传：结合 Content-Range + 后端分片合并。
5. 安全防护：
   • 前端白名单校验 MIME / 后缀。
   • token/签名防盗链。
   • HTTPS 保障传输安全。

---

四、结语

实现文件上传与下载并不难，难的是在各种异常面前稳如老狗。

• 上传要三查：文件、网络、后端业务。
• 下载要三稳：合法链接、正确权限、完整内容。