Element UI Plus + Vue3 给 Upload设置请求头

问题描述

在vue项目中我们发送 ajax 请求一般都会使用 axios,并在 axios 中设置axios.defaults.baseURL,请求的基本地址,并在请求拦截器中设置 headers

使用 el-upload 上传组件时,action 为必选参数,上传的地址。

但此时我们为action填写地址不能不写基本地址而仅写 upload,要写完整的地址。

这是因为 el-upload 上传组件在上传发送请求时,不会去使用我们设置的 axios,而是在组件内部自己封装了自己的请求方法。所以我们必须把地址写完整。

那有时在上传时会报出错误,例如"无效token",这是因为我们没有为此上传请求设置请求头部。el-upload 组件有一个属性 headers ,设置上传的请求头部。

解决方案

HTML 代码

html 复制代码
 <el-upload class="upload-demo" drag 
	:action=uploadPath 
	multiple="true" 
	accept=".pdf, .xlsx, .xls" 
	:headers="headers"
	:show-file-list="false" 
	:on-change="handleChange">
     <el-icon class="el-icon--upload"><upload-filled /></el-icon>
     <div class="el-upload__text">
         ドラッグ・ドロップもしくはクリックしてファイルを選択してください
     </div>
     <template #tip>
         <div class="el-upload__tip">
             PDF のみアップロードできます
         </div>
     </template>
 </el-upload>

JS 代码

javaScript 复制代码
<script setup>
	import { useUserStore } from '@/store/user'
	const userStore = useUserStore()
	const token = userStore.userInfo.token
	const Authorization = `Bearer ${token}`
	const headers = ref({'Authorization':Authorization})
</script>

引用

如何在ElementUI的上传组件el-upload中设置header

相关推荐
gnip4 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
王王碎冰冰11 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼12 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安13 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队13 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好13 小时前
pinia从定义到运用
前端·vue.js
代码小学僧13 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
东坡白菜14 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
猩兵哥哥17 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
EMT19 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js