必须在 upload.render 的 before 回调中动态设置 this.headers.token,因为 headers 在 render 时固化,仅 before 能确保每次上传携带最新 token;空 token 应 return false 阻止请求。
headers 参数在 upload.render 里写死会失效
因为 upload.render 是一次性初始化,headers 对象在 render 执行时就被固化了。如果用户刚进页面还没登录,window.sessionstorage.getitem('token') 返回 null,后续即使登录成功、token 已存入 sessionstorage,上传请求仍会带着空 token 发出去,后端直接 401。
- 这不是跨域问题,也不是接口地址错,是 headers 的值没“活”起来
- 哪怕你在登录后手动调用
uploadInst3.config.headers.token = xxx,也无效——Layui 内部不监听 config 变更 - 真正起作用的只有
before回调里对this.headers的赋值,它每次上传前都会执行
必须在 before 回调里动态更新 this.headers.token
before 是唯一能确保每次上传都拿到最新 token 的地方。它在文件真正发出请求前触发,此时修改 this.headers 会直接影响本次 XHR 请求头。
- 不要在
choose或done里改this.headers,它们不参与请求头组装 -
this.headers是引用对象,直接赋值即可,比如this.headers.token = sessionStorage.getItem('token') - 如果 token 为空,建议主动 return false 阻止上传,并提示“请先登录”,避免发一个带空 token 的请求被后端拒绝
before: function() {
const token = window.sessionStorage.getItem('token');
if (!token) {
layer.msg('未检测到登录状态,请先登录');
return false;
}
this.headers.token = token;
}
data 和 headers 的分工要清楚
headers 只放认证类字段(如 token、Authorization),data 放业务参数(如 type、id、tablename)。两者生命周期不同:data 可在 before 里动态设,也可在 render 时静态写;headers 必须靠 before 动态刷。
-
headers修改只影响当前这一次上传请求 -
data在before里设,等价于每次上传都带上新参数,适合依赖当前表单状态的场景 - 别把 token 塞进
data传给后端——既不安全,也不符合 REST 接口规范
注意 token 存储位置和读取时机
用 sessionStorage 比 localStorage 更稳妥:关闭标签页自动清空,避免用户登出后 token 残留导致误传。但要注意,有些项目用 cookie 或自定义 storage 封装,这时 before 里得调对应方法取值,不能硬写 sessionStorage.getItem。
- 如果后端要求的是
Authorization: Bearer xxx格式,headers 应写成{ Authorization: 'Bearer ' + token } - token 过期后,
before里取到的仍是旧值,需配合全局响应拦截器做 401 跳转登录,否则用户卡在上传失败循环里 - Layui 2.2.6+ 才支持
headers参数,老版本只能靠改源码或换 axios 封装上传
before 里加非空校验——空 token 发出去,后端不认,前端还不报错,只默默失败。










