問題描述
在vue項目中我們發(fā)送 ajax 請求一般都會使用 axios，并在 axios 中設置axios.defaults.baseURL，請求的基本地址，并在請求攔截器中設置 headers
使用 el-upload 上傳組件時，action 為必選參數(shù)，上傳的地址。
但此時我們?yōu)閍ction填寫地址不能不寫基本地址而僅寫 upload，要寫完整的地址。
這是因為 el-upload 上傳組件在上傳發(fā)送請求時，不會去使用我們設置的 axios，而是在組件內部自己封裝了自己的請求方法。所以我們必須把地址寫完整。
那有時在上傳時會報出錯誤，例如“無效token”，這是因為我們沒有為此上傳請求設置請求頭部。el-upload 組件有一個屬性 headers ，設置上傳的請求頭部。
解決方案
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 代碼文章來源：http://www.zghlxwxcb.cn/news/detail-834211.html
<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文章來源地址http://www.zghlxwxcb.cn/news/detail-834211.html
到了這里，關于Element UI Plus + Vue3 給 Upload設置請求頭的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
