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

前端文件上传与下载攻略

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

一、文件上传

1. 基础结构

html 复制代码

<input type="file" id="fileInput" />
<button id="uploadBtn">上传</button>

2. 核心脚本

javascript 复制代码

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

html 复制代码

<a href="/static/report.pdf" download="报告.pdf">下载报告</a>

场景 2：前端生成 / 动态获取文件

javascript 复制代码

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

进度条

javascript 复制代码

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 保障传输安全。

四、结语

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

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