当前位置：首页 > news >正文

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

news 来源：原创 2025/7/1 20:55:39

前端文件上传与下载攻略

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

一、文件上传

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

四、结语

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

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

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

前端文件上传与下载攻略本文目标：帮你快速掌握文件上传 & 下载的核心实现方式，并在常见出错场景下保持“优雅不崩溃”。一、文件上传 1. 基础结构 <input type"file" id"fileInput" /> <button id"uploadBtn&…...

编程日记 2025/7/1 20:55:39

【axios取消请求】如何在token过期后取消未响应的请求

功能背景： 我们在实际项目中通常会遇到登录过期后会跳登录页的情况，回跳过程会根据接口请求的状态码判断是否登陆状态过期，并给出用户提示，如果此时存在多个请求接口同时调用，就会同时报出多个登录过期的提示&#xf…...

编程日记 2025/7/1 20:07:06

【高频考点精讲】JavaScript中的组合模式：从树形结构到组件嵌套实战

📚 目录 📦 什么是组合模式？🌲 基础版：用组合模式构建一个简单的树形结构💡 举个更真实的场景：菜单组件🧠 为什么组合模式在前端特别重要？🔨 实战案例：组件嵌套组合 + 权限控制🧩 组合模式的延伸用法：搭建 UI DSL 引擎🧪 面试题时间（欢迎评论区作答）组…...

编程日记 2025/7/1 19:56:25

《仙剑奇侠传二》游戏秘籍

无限冥纸：在丰都城，点击特定的小猫，它会给你五张冥纸，再次点击还会再给五张，可循环获取。无限使用虎煞技能：学会 “虎啸风声” 技能后，将虎煞之力值设置为 16，在战斗中持续使用该技能…...

编程日记 2025/7/1 20:19:07

AWS 中国区 CloudFront SSL 证书到期更换实战指南

适用场景: AWS 中国区（宁夏区域 cn-northwest-1 或北京区域 cn-north-1）CloudFront 分配的 SSL 证书到期后无缝替换，域名主体为 domain.cn。背景与痛点当 CloudFront 使用的 SSL 证书即将到期时，需手动替换新证书以避免服务中断。由于 AWS 中国区不支持 ACM 证书，必须…...

编程日记 2025/7/1 20:20:33

【2025A卷】华为OD机试九日集训第3期 - 按算法分类，由易到难，提升编程能力和解题技巧，从而提高机试通过率（Python/JS/C/C++）

目录一、适合人群二、本期训练时间三、如何参加四、数据结构与算法大纲五、华为OD九日集训第3期第1天、逻辑分析第2天、逻辑分析第3天、双指针第4天、双指针第5天、数据结构map第6天、栈第7天、二叉树第8天、贪心算法第9天、二分查找六、集训总结国内直接使用最新o3、o4-mini…...

编程日记 2025/7/1 19:46:28

MacOS上如何运行内网穿透详细教程

本文以市面常见、好用的内网穿透为例，一款为开源内网穿透工具Frp;另一款为国产新锐软件ZeroNews。一、Frp（开源工作、使用自由） 1. 下载 FRP 访问 FRP 的 GitHub 发布页： https://github.com/fatedier/frp/releases 选择适合 …...

编程日记 2025/7/1 19:38:23

第55讲：农业人工智能的跨学科融合与社会影响——构建更加可持续、包容的农业社会

目录一、农业人工智能的多维融合：科技与社会的桥梁 1. 技术与社会：解决现代农业中的不平等 2. AI与伦理：塑造道德规范与社会责任 3. AI与政策：推动农业政策的科学决策与智能执行二、AI与农业未来社会的构建：更绿色、更智能、更包容 1. 推动农业可持续发展：绿色农…...

编程日记 2025/7/1 19:52:32

JVM性能优化之老年代参数设置

一、引言咱们书接上回，上篇文章主要讲解了年轻代参数设置，如果对这一部分还不清楚的建议先去看一下（年轻代参数设置），本文主要为大家介绍老年代参数的设置，掌握好jvm参数的设置是一个高级开发人人员必备的…...

编程日记 2025/7/1 20:13:17

在 Ubuntu 环境为 Elasticsearch 引入 `icu_tokenizer

1. 为什么需要 ICU 分析插件 Elasticsearch 默认的 standard tokenizer 遵循 UAX #29 规则，但在 CJK（中、日、韩）等亚洲语言上仅能按字符切分，无法识别词边界；对包含重音符号、大小写或多脚本混排的文本也缺乏统一归一…...

编程日记 2025/7/1 20:20:33

JMeter 安装及使用 [软件测试工具]

目录 JMeter 1. JMeter 安装 1.1 点击官网下载: JMeter官网下载 1.2 下载后解压即可 1.3 打开 JMeter 1.3.1 方式一: 点击对应程序打开 1.3.2 方式二: 命令行启动 1.4 关闭 JMeter 2. JMeter 基础配置 2.1 修改字体为简体中文 2.2 添加拓展插件 2.2.1 下载其他监听器…...

编程日记 2025/7/1 20:27:41

Unity 资源合理性检测

一：表格过度配置，表格资源是否在工程中存在，并输出不存在的资源 import pandas as pd import glob import osassets [] count 0# 遍历configs文件夹下所有xlsx文件 for file_path in glob.glob(configs/*.xlsx):count 1try:sheets pd.re…...

编程日记 2025/7/1 20:07:07

vue-study（1）

黑马智数项目黑马智数是一个数字化园区管理项目，该项目后台可以在线管理园区内的楼宇、企业、车辆和一体杆等资源，可视化大屏通过园区3D模型实时展示园区概况。通过该项目能学到如何用qiankun搭建微前端架构、用Echarts进行数据可视化、以及前沿的3D模…...

编程日记 2025/7/1 19:48:15

XS5032：高性能3DNR+HDR ISP-TX 2K芯片

爱芯元智 XS5032：高性能3DNRHDR ISP-TX 2K芯片视频输入支持MIPI接口，4lane，Max.1.5Gbps/lane 支持Sensor并口（DVP） 视频分辨率支持多种同轴高清制式和标清制式，包括： 960H25/30fps&…...

编程日记 2025/6/29 12:11:38

[原创](现代Delphi 12指南):[macOS 64bit App开发]：如何使用NSString类型字符串?

[作者] 常用网名: 猪头三出生日期: 1981.XX.XX 企鹅交流: 643439947 个人网站: 80x86汇编小站编程生涯: 2001年~至今[共24年] 职业生涯: 22年开发语言: C/C++、80x86ASM、Object Pascal、Objective-C、C#、R、Python、PHP、Perl、开发工具: Visual Studio、Delphi、XCode、…...

编程日记 2025/6/29 12:04:56

TDengine 流计算引擎设计

流计算架构 TDengine 流计算的架构如下图所示。当用户输入用于创建流的 SQL 后，首先，该 SQL 将在客户端进行解析，并生成流计算执行所需的逻辑执行计划及其相关属性信息。其次，客户端将这些信息发送至 mnode。mnode 利用来自数据源…...

编程日记 2025/7/1 20:45:39

中国剩余定理中国剩余定理考虑一组模线性同余方程： { x ≡ a 1 ( m o d m 1 ) x ≡ a 2 ( m o d m 2 ) . . . x ≡ a k ( m o d m k ) \begin{cases} x\equiv a_1\pmod{m1} \\ x\equiv a_2\pmod{m2}\\ .\\ .\\ .\\ x\equiv a_k\pmod{mk}\\ \end{cases} ⎩ ⎨ ⎧…...

编程日记 2025/6/29 11:45:36

git检查提交分支和package.json的version版本是否一致

这里写自定义目录标题一、核心实现步骤‌1.安装必要依赖‌2.初始化 Husky‌3.创建校验脚本‌4.配置 lint-staged‌5.更新 Husky 钩子‌ 三、工作流程说明‌四、注意事项‌ 以下是基于 Git Hooks 的完整解决方案，通过 husky 和自定义脚本实现分支名与版本号一致性校…...

编程日记 2025/6/29 10:22:49

Git 详细使用说明文档（适合小白）

Git 详细使用说明文档（适合小白） 1. 什么是 Git？ Git 是一个版本控制系统，帮助你管理和跟踪代码的变更。无论是个人项目还是团队协作，Git 都能帮助你记录代码的历史版本，方便回溯和协作。 2. 安装 Git …...

编程日记 2025/6/29 10:15:01

【嵌入式系统设计师（软考中级）】第二章：嵌入式系统硬件基础知识(2)

文章目录 3.嵌入式系统的存储体系3.1 存储系统的层次结构3.2 内存管理单元（MMU）3.3 RAM和ROM的种类3.3.1 RAM类型对比3.3.2 ROM类型对比 3.4 高速缓存（Cache）3.5 其他存储设备3.5.1 新型存储技术3.5.2 外存接口技术 3.嵌入式系统的…...

编程日记 2025/7/1 0:18:49

rk3588 驱动开发（三）第五章新字符设备驱动实验

register_chrdev 和 unregister_chrdev 这两个函数是老版本驱动使用的函数，现在新的字符设备驱动已经不再使用这两个函数，而是使用 Linux 内核推荐的新字符设备驱动 API 函数。本节我们就来学习一下如何编写新字符设备驱动，并且在驱动模块加载…...

编程日记 2025/6/29 12:25:36

文件上传--WAF绕过干货

本文主要内容绕过WAF上传文件 -- 安全狗 -- 宝塔 Burp抓包解析 #上传参数名解析：明确哪些东西能修改? Content-Disposition：—般可更改 name：表单参数值，不能更改 filename：文件名&#xff…...

编程日记 2025/7/1 20:16:46

BERT BERT

BERT ***** 2020年3月11日更新：更小的BERT模型 ***** 这是在《深阅读的学生学得更好：预训练紧凑模型的重要性》（arXiv:1908.08962）中提到的24种较小规模的英文未分词BERT模型的发布。我们已经证明，标准的BERT架构和…...

编程日记 2025/7/1 20:41:09

Kotlin Multiplatform--02：项目结构进阶

Kotlin Multiplatform--02：项目结构进阶引言正文引言在上一章中，我们对 Kotlin Multiplatform 项目有了基本的了解，已经可以进行开发了。但我们只是使用了系统默认的项目结构。本章介绍了如何进行更复杂的项目结构管理。正文在上一章中&…...

编程日记 2025/7/1 19:35:35

【ES实战】Elasticsearch中模糊匹配类的查询

Elasticsearch中模糊匹配类的查询文章目录 Elasticsearch中模糊匹配类的查询通配符查询前缀匹配查询正则匹配查询标准的正则操作特殊运算符操作模糊化查询Fuzziness text类型同时配置keyword类型 Elasticsearch中模糊类查询主要有以下 Wildcard Query：通配符查询P…...

编程日记 2025/7/1 15:45:47

纯真社区IP库离线版发布更新

纯真社区IP库离线版发布更新发布者：技术分享 2005年，随着中国互联网的蓬勃发展，纯真IP库诞生了。作为全球网络空间地理测绘技术的领先者，纯真开源项目为中国互联网行业提供了高质量的网络空间IP库数据。纯真IP库目前已经覆盖超…...

编程日记 2025/6/29 19:35:55

直接偏好优化（Direct Preference Optimization，DPO）：论文与源码解析

简介虽然大规模无监督语言模型（LMs）学习了广泛的世界知识和一些推理技能，但由于它们是基于完全无监督训练，仍很难控制其行为。微调无监督LM使其对齐偏好，尽管大规模无监督的语言模型（LMs）能…...

编程日记 2025/6/29 19:38:30

uniapp-商城-34-shop 购物车选好了进行订单确认

在shop页面选中商品添加到购物车，可选好后，进行确认和支付。具体呈现在shop页面。 1 购物车栏 shop页面代码： 购物车代码： 代码： <template><view><view class"carlayout"><!-- 车里…...

编程日记 2025/6/29 19:32:42

Kafka命令行的使用/Spark-Streaming核心编程（二）

Kafka命令行的使用创建topic kafka-topics.sh --create --zookeeper node01:2181,node02:2181,node03:2181 --topic test1 --partitions 3 --replication-factor 3 分区数量，副本数量，都是必须的。数据的形式： 主题名称-分区编号。在…...

编程日记 2025/6/29 19:35:01

虚拟机详解

虚拟机详解 1. 虚拟机（Virtual Machine）的定义系统虚拟机：通过软件模拟完整计算机系统（CPU、内存、外设等），如 VMware、VirtualBox。进程级虚拟机：为单个应用提供虚拟执行环境，如 …...

编程日记 2025/6/29 19:35:56

NOIP2013 提高组.转圈游戏

目录题目算法标签: 数论, 模运算思路代码题目 504. 转圈游戏算法标签: 数论, 模运算思路看题意不难看出, 计算的是 ( x 1 0 k m ) m o d n (x 10 ^ k \times m) \mod n (x10km)modn, 如果直接计算一定会超时, 因此可以使用快速幂进行优化代码 #include <iost…...

编程日记 2025/6/29 19:37:28

【金仓数据库征文】加速数字化转型：金仓数据库在金融与能源领域强势崛起

目录一、引言二、金仓数据库（KingbaseES）概述 1. 发展历程与市场地位 2. 核心技术架构 3. 金仓数据库的特点三、金仓数据库在金融行业的应用 1. 金融行业的挑战与需求 2. 金仓数据库在金融行业的优势 3. 金仓数据库在金融行业的实际应用案例 …...

编程日记 2025/6/29 19:36:38

济南国网数字化培训班学习笔记-第二组-5节-输电线路设计

输电线路设计工程设计阶段划分 35kv及以上输变电工程勘测设计全过程可行性研究（包括规划、工程选站）（包括电力系统一次二次，站址选择及工程设想，线路工程选择及工程设想，节能降耗分析，环境…...

编程日记 2025/6/29 19:37:05

【前端】【业务场景】【面试】在前端开发中，如何实现一个可拖动和可缩放的元素，并且处理好边界限制和性能优化？

问题：在前端开发中，如何实现一个可拖动和可缩放的元素，并且处理好边界限制和性能优化？ 一、实现可拖动和可缩放元素 HTML 和 CSS 基础设置： 创建一个 HTML 元素，并为其设置基本样式，使其在页面…...

编程日记 2025/7/1 15:11:49

BOM与DOM（解疑document window关系）

BOM（浏览器对象模型） 定义与作用 BOM（Browser Object Model）提供与浏览器窗口交互的接口，用于控制导航、窗口尺寸、历史记录等浏览器行为 window：浏览器窗口的顶层对象，包含全局属性和方法&am…...

编程日记 2025/6/29 10:46:12

504 nginx解决方案

当遇到 504 Gateway Time-out 错误时，通常是因为 Nginx 作为反向代理等待后端服务（如 PHP-FPM、Java 应用等）响应的时间超过了预设的超时阈值。以下是详细的解决方案，结合知识库中的信息整理而成： 一、核心原因分析后…...

编程日记 2025/6/29 12:22:03

【LLM+Code】Windsurf Agent 模式PromptTools详细解读

一、前言 https://windsurf.com/ https://windsurf.com/blog/why-we-built-windsurf https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools/tree/main/Windsurf 二、System Prompt 相比于cursor和claude code， windsurf的system prompt非常长&am…...

编程日记 2025/6/29 9:18:23

第三章：Transport Mechanisms

Chapter 3: Transport Mechanisms 🌟 从上一章到本章在第二章：MCP服务器分类中，我们学会了如何根据需求选择不同类别的服务器（如文件系统、数据库等）。现在想象这样一个场景：你有一个本地文件服务器和一个…...

编程日记 2025/6/29 12:10:54

shell练习题(1)

练习: 1.建立脚本service.sh,当执行的时候要求输入(1、2、3、4、5)时安装对应的httpd、vim、wget、更换aliyum等功能，当输入错误时会提示你，应该输入正确的值 [rootbogon yy]# cat service.sh #!/bin/bash cat <<-EOF ----------------------…...

编程日记 2025/6/29 9:18:20

【解决】Android Gradle Sync 报错 Could not read workspace metadata

异常信息 Caused by: java.io.UncheckedIOException:Could not read workspace metadata from C:\Users\xxx\.gradle\caches\transforms-4\69955912123c68eecd096b71c66ee211\metadata.bin 异常原因看字面意思是不能读取metadata文件，原因可能是因为缓存目录异常…...

编程日记 2025/6/29 11:42:17

Python中的 for 与迭代器

文章目录一、for 循环的底层机制示例：手动模拟 for 循环二、可迭代对象 vs 迭代器关键区别： 三、for 循环的典型应用场景1. 遍历序列类型2. 遍历字典3. 结合 range() 生成数字序列4. 遍历文件内容四、迭代器的自定义实现示例：生成斐波那契…...

编程日记 2025/6/29 10:42:17

上篇：深入剖析 BLE 底层物理层与链路层（约5000字）

引言在无线通信领域，Bluetooth Low Energy（BLE）以其超低功耗、灵活的连接模式和良好的生态支持，成为 IoT 与可穿戴设备的首选技术。要想在实际项目中优化性能、控制功耗、保证可靠通信，必须对 BLE 协议栈的底层细节有深入了解。本篇将重点围绕物理层（PHY）与链路层（Li…...

编程日记 2025/6/29 10:39:22

ArcGIS Pro跨图层复制粘贴

在map视图中，点击selection中的Select按钮，保持选择状态。点击需要复制的要素，保持选中状态。右击点击copy，或CtrlC进行复制。在Clipboard下拉框中点击Paste Special，选择需要粘贴的图层后点击OK。...

编程日记 2025/6/29 11:06:36

今日CSS学习浮动-＞定位

------------------------------------------------------------------------------------------------------- CSS的浮动 float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 float 属性定义元素在哪个方向浮…...

编程日记 2025/6/29 11:40:39

性行为同意协议系统网站源码

性行为同意协议系统网站源码一个用于创建、签署和管理性行为同意协议的 Web 应用程序。该应用允许用户在线创建详细的性行为同意协议，并通过数字签名方式进行签署，同时支持导出为 PDF 格式保存。功能特性创建自定义性同意协议多步骤表单引导用户完…...

编程日记 2025/6/29 10:14:07

项目自动化测试

一.设计测试用例(细致全面) 二.先引入所需要的pom.xml依赖 1.selenium依赖 2.webdrivermanager依赖 3.commons-io依赖编写测试用例–按照页面对用例进行划分,每个页面是Java文件,页面下的所有用例统一管理三.common包(放入公用包) 类1utils 可以调用driver对象,访问url …...

编程日记 2025/6/29 10:06:48

可变形卷积(可以观察到变形图片的卷积)【DCNv1、DCNv2、DCNv3】

一、DCNv1——可以观察到扭曲的图片 1.传统卷积的问题在普通的卷积操作中，比如 33 卷积，采样的位置总是固定的：就是中间一个点，四周八个点，整齐地排成一个小网格。但现实中的图像并不整齐——比如猫的身体弯着、车…...

编程日记 2025/6/29 10:15:46

vue3，element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据

基础用法不太明白的请参考官网文档 ；element ui Plus官网：Table 表格 | Element PlusA Vue 3 based component library for designers and developershttps://element-plus.org/zh-CN/component/table.html 1、添加一个基础表格 <template><e…...

编程日记 2025/6/29 11:11:41