【前端】【业务场景】【面试】在前端开发中，如何实现文件的上传与下载功能，并且处理可能出现的错误情况？

前端文件上传与下载攻略

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

---

一、文件上传

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();             // ② 转 blob
    const 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 保障传输安全。

---

四、结语

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

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