讲师中心 微信公众号
AI工具推荐 视频效率加速

Layui如何配置上传组件的Header请求头令牌

千辰吖_5761

千辰吖_5761

发布时间:2026-05-21 07:32:15

|

910人浏览过

|

来源于php中文网

原创

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框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
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 规则默认允许,无需额外声明
真正容易出问题的地方,是以为 upload 和 table 共享同一套请求机制——它们根本不在一个通道上。header 动态注入这件事,必须绑定到 before 生命周期里做,而且得每次上传都执行,不能只依赖初始化。

热门AI工具

更多
蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2740

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

360

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2573

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1141

2024.09.24

cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

11599

2023.06.30

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1066

2023.11.23

阻止所有cookie什么意思
阻止所有cookie什么意思

阻止所有cookie意味着在浏览器中禁止接受和存储网站发送的cookie。阻止所有cookie可能会影响许多网站的使用体验,因为许多网站使用cookie来提供个性化服务、存储用户信息或跟踪用户行为。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

784

2024.02.23

cookie与session的区别
cookie与session的区别

本专题整合了cookie与session的区别和使用方法等相关内容,阅读专题下面的文章了解更详细的内容。

1886

2025.08.19

PixTV官网入口地址合集
PixTV官网入口地址合集

本专题汇总了 PixTV AI 一站式视频创作平台的官方入口与使用教程。无需下载软件,浏览器直接访问即可使用。平台将剧本、图像、视频、声音与剪辑整合在“无限画布”中,接入 GPT Image 2.5、Seedance 2.5 等头部模型。本专题整理了从新建画布、角色锚定、分镜拆分到视频生成与导出的完整操作指南,助你快速上手 AI 短剧与漫剧创作。

60

2026.10.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.8万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn