Vue文件上传成败判定核心是响应结果而非中间状态：成功需同时满足HTTP状态码为200且响应data中code为0；失败分三类——网络异常（error.response为空）、HTTP错误码（4xx/5xx）、业务失败（200但code≠0）。
Vue 中处理文件上传的成功与失败回调，核心是抓住请求完成后的响应结果和异常路径，而不是依赖“上传中”的中间状态。关键在于：成功看 响应数据结构 和 HTTP 状态码，失败看 网络异常、超时、后端返回的错误码 三类情况。
成功回调的判定方式
上传成功不等于请求发出去了，而是后端明确返回了可预期的业务成功标识。
- 检查响应 status 是否为 200（或你后端约定的成功码，如 201）
- 解析 response.data，确认其中包含预期字段（例如
{ code: 0, data: { url: "https://xxx/file.pdf" } }） - 避免仅靠“没报错”就认为成功——后端可能返回 200 +
{ code: 500, msg: "磁盘已满" } - 若用 Ant Design Vue 或 PrimeVue 等组件，直接监听
@success事件，它内部已封装了上述逻辑
失败回调的常见类型与处理
失败不是单一场景，需分类捕获并给出不同反馈：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
网络层失败：Axios 抛出异常（如网络断开、DNS 失败、CORS 拒绝），进入
.catch()，此时error.request存在但error.response为 undefined -
HTTP 状态异常：服务端返回 4xx/5xx（如 413 Request Entity Too Large、502 Bad Gateway），
error.response.status可读，建议根据 status 做差异化提示（如 413 提示“文件超限”，502 提示“服务暂不可用”） -
业务逻辑失败：后端返回 200，但 data 中
code !== 0（如校验不通过、权限不足），需手动判断res.data.code并提示res.data.msg - 使用
el-upload时，@error事件只捕获前两类；业务失败需在@success回调里二次判断response.code
带进度的上传如何同步处理成败
进度条本身不决定成败，但它能提升用户对结果的预期管理：
立即学习“前端免费学习笔记（深入）”；
- 在
onUploadProgress中更新进度，但不要在此做成败判断 - 成功回调中重置进度条、添加文件到列表、清空 input 的 value（
event.target.value = ''防止重复选同一文件） - 失败回调中显示错误 toast，并保留原始文件供重试（尤其分片上传场景）
- 若用 WebUploader，它的
uploadSuccess和uploadError是真正的业务完成事件，可直接用于 UI 更新
实际代码中的典型写法
以 Axios 为例，成败逻辑应集中、清晰：
- 成功分支：
if (res.data.code === 0) { /* 正常后续 */ } else { /* 当作业务失败处理 */ } - 失败分支：
if (!error.response) { /* 网络问题 */ } else if (error.response.status >= 500) { /* 服务端错误 */ } else { /* 客户端或校验问题 */ } - 避免在
.then()里只写 console.log，也不要在.catch()里只写 alert——要区分错误类型并引导用户动作（重试 / 换文件 / 联系客服）
