Layui.upload error回调不触发主因是HTTPS页面混合内容被拦截,Network面板显示blocked:mixed-content;done不触发多因响应头缺Content-Type或JSON格式错误;headers键名不能加引号;调试需结合Network面板分段验证。
error回调不触发?先看是不是混合内容被拦截
https 页面里 layui.upload 报错但 error 回调没执行,大概率是浏览器静默拦截了 http 请求。此时 network 面板里请求会标为 blocked:mixed-content,状态码显示为 0 或直接消失。
-
url必须写成绝对 HTTPS 地址,比如https://api.example.com/upload,不能用/upload或http://... - 即使页面是 HTTPS,若服务端反向代理没透传
X-Forwarded-Proto: https,后端可能误判协议并跳转或拒绝 - 移动端 WebView(尤其是微信、iOS WKWebView)对此更敏感,
error回调可能完全不进,只能靠 Network 面板确认请求是否发出
done 回调没进,但文件已上传成功?检查响应头和 JSON 格式
服务器返回了 200 状态码,文件也落盘了,但 done 不执行,只进 error,说明 Layui 在解析响应时失败——不是网络问题,而是格式问题。
- 响应必须带
Content-Type: application/json; charset=utf-8,缺一不可 - 返回体必须是合法 JSON 字符串,不能是纯文本如
"success",也不能是 HTML 片段 - 默认期望字段是
code,值为0表示成功;若后端用status,得通过response参数重映射:response: { statusName: 'status', statusCode: 200 }
自定义 error 处理时,注意 res 参数结构不统一
error 回调的参数 res 并非总是服务器返回的数据:当网络层失败(如混合内容拦截、DNS 错误、连接超时),res 是原生 XMLHttpRequest 实例,没有 code 或 msg 字段;只有服务端返回非 JSON 或非 200 响应时,才可能是解析后的对象。
- 别直接访问
res.code,先判断typeof res === 'object'且res.readyState是否存在 - 推荐写法:
if (res && res.status !== undefined) { /* 网络层错误 */ } else { /* 服务端返回异常数据 */ } - 调试时优先看 Network 面板里该请求的 Response 和 Preview 标签页,比依赖
console.log(res)更可靠
Token 传参失败导致“请求上传接口出现异常”?检查 headers 写法
加了 headers 却始终报接口异常,常见原因是键名用了字符串字面量而非裸属性名。Layui 内部用 for...in 遍历对象,若键带引号会被忽略。
- ✅ 正确:
headers: { access_token: localStorage.access_token } - ❌ 错误:
headers: { "access_token": localStorage.access_token }—— 这会导致请求根本发不出,控制台只报模糊异常 - 如果 Token 存在 localStorage 里,务必确认
localStorage.access_token不为空,否则请求头实际是access_token: undefined,部分后端会直接拒收
真正容易被忽略的是:Layui 的上传异常路径不止一条——网络层失败、JSON 解析失败、字段映射失败、Token 无效,它们触发的回调不同、参数结构不同、调试手段也不同。别只盯着一个 error 回调打日志,得配合 Network 面板分段验证。


















