在ElementUI的上传组件el-upload中设置header
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
在vue项目中我们发送ajax请求一般都会使用axios,并在axios中设置axios.defaults.baseURL,请求的基本地址,并在请求拦截器中设置headers
axios.interceptors.request.use(config=>{
NProgress.start();
// 发送请求需带上token
config.headers.Authorization=window.sessionStorage.getItem("token")
return config;
})
使用el-upload上传组件时,action 为必选参数,上传的地址。但此时我们为action填写地址不能不写基本地址而仅写upload,要写完整的地址。这是因为el-upload上传组件在上传发送请求时,不会去使用我们设置的axios,而是在组件内部自己封装了自己的请求方法。所以我们必须把地址写完整。
那有时在上传时会报出错误,例如‘无效token’,这是因为我们没有为此上传请求设置请求头部。el-upload组件有一个属性headers ,设置上传的请求头部
<el-upload
action="http://127.0.0.1:8888/api/private/v1/upload"
:headers="headerObj"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件,且不超过500kb
</div>
</el-upload>
在data中定义headerObj
headerObj: {
Authorization: window.sessionStorage.getItem("token"),
},
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)