应分类捕获并友好提示上传错误：网络异常提示连接问题，HTTP状态码按语义映射文案，业务错误直接展示message；统一用封装提示函数，避免重复逻辑，兼容后端多种错误格式。

Vue 文件上传时，服务器返回错误（如 400、403、500 或业务错误码）不能只靠控制台打印或静默失败。关键是要把错误分类捕获，并转化为用户能看懂、有操作指引的友好提示。

明确错误类型，分层处理

上传失败通常分三类：网络异常、HTTP 状态错误、后端业务错误。统一在 axios 响应拦截器中识别：

• 网络/超时/取消请求：error.request 存在但 error.response 为 undefined，提示“网络不稳定，请检查连接后重试”
• HTTP 状态码错误：如 401（未登录）、403（无权限）、413（文件过大）、500（服务异常），按状态码映射语义化文案
• 业务错误（后端返回 200 但 data.code ≠ 200）：比如 { code: 1002, message: "仅支持 .xlsx 格式" }，直接取 message 提示，不覆盖原始语义

在上传组件中绑定错误钩子

以 Element Plus 的 <el-upload></el-upload> 为例，不要只依赖 on-error，要结合响应体内容做精细化反馈：

• 用 :http-request="customUpload" 替代默认 action，完全掌控请求逻辑
• 在 on-error 回调里接收 error 参数，优先读 error.response?.data?.message， fallback 到预设文案
• 对特定错误（如格式不符、大小超限）可提前在 before-upload 拦截，避免发起无效请求

统一提示方式，避免页面割裂

不推荐每个上传组件自己写 ElMessage.error()，应封装成可复用的提示函数：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

立即学习“前端免费学习笔记（深入）”；

• 调用 useMessage().error(提示文案)（Pinia 或 composable 封装）
• 对严重错误（如 401）同步触发登录跳转；对临时性错误（如 429 频率限制）加“稍后重试”引导
• 保留错误日志上报能力（如 Sentry），但对用户始终展示简洁、无技术术语的提示

后端返回格式需前端可解析

前后端约定错误结构是前提。推荐后端统一返回：

{ "code": 400, "message": "文件类型不支持", "data": null }

前端拦截器据此提取 message，而非拼接 statusText 或 raw response。若后端返回字符串（如 "机构名称未找到!"），也应兼容解析，不因格式差异导致提示空白。