layui upload 的 headers 必须在 before 回调中动态赋值,因其不走 jQuery AJAX,无法通过 ajaxPrefilter 全局注入;需每次上传前读取 localStorage 中的 token 并设置 this.headers,且不可手动设置 Content-Type。
layui upload 的 headers 是静态配置,不能靠 ajaxPrefilter 自动注入
因为 upload 组件底层不走 $.ajax,而是用原生 xmlhttprequest + formdata 发送请求,所以全局的 $.ajaxprefilter 或 $.ajaxsetup 对它完全无效。这是最常被忽略的前提——很多人照搬 table 或 get 请求的写法,结果上传始终没带 token。
必须在 before 回调里动态赋值 this.headers
upload 实例的 headers 属性支持运行时修改,且每次上传前都会读取当前值。关键点是:要在 before 钩子中给 this.headers 赋新值,而不是只在 render 时初始化。
-
this.headers是实例上下文对象,不是全局变量,改它才生效 - token 应从
localStorage或sessionStorage动态读取,避免页面加载时 token 为空导致后续上传失败 - 如果 token 有刷新机制(如 JWT 过期续签),
before是唯一能确保用最新 token 的时机
示例:
layui.use('upload', function(){
var upload = layui.upload;
upload.render({
elem: '#upload',
url: '/api/upload',
before: function(obj){
// 每次上传前重读 token
this.headers = {
'Authorization': 'Bearer ' + localStorage.getItem('token')
};
// 可选:校验 token 存在性,提前中断
if (!this.headers.Authorization) {
return layer.msg('未登录,请先登录', {icon: 2});
}
},
done: function(res){
console.log('上传成功', res);
}
});
});
上传时 Content-Type 不能手动设为 application/json
文件上传必须用 multipart/form-data,这是浏览器自动设置的;如果你在 headers 里硬写 'Content-Type': 'application/json',会导致后端解析失败或直接拒收。
- 不要碰
Content-Type—— upload 组件会自动处理边界和编码 - 如果后端要求额外字段(如
X-Request-ID),可以放心加在this.headers里 - 需要传业务参数?用
data配置项,别塞进 headers
跨域上传时,headers 里的自定义字段要和服务端 CORS 白名单对齐
比如你加了 'X-Auth-Token',后端的 Access-Control-Allow-Headers 就必须显式包含它,否则浏览器会拦截预检(OPTIONS)请求。
- 常见错误现象:
Failed to load http://xxx: no 'Access-Control-Allow-Headers' header is present - 开发阶段可临时让后端返回
Access-Control-Allow-Headers: *,但上线前必须精确列出 - 注意:
Authorization字段通常已被浏览器 CORS 规则默认允许,无需额外声明
before 生命周期里做,而且得每次上传都执行,不能只依赖初始化。











