如何在ElementUI的上傳組件el-upload中設置header

更新時間：2022年09月07日 08:34:10 作者：龍易安

這篇文章主要介紹了如何在ElementUI的上傳組件el-upload中設置header，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

在ElementUI上傳組件el-upload中設置header

在vue項目中我們發(fā)送ajax請求一般都會使用axios，并在axios中設置axios.defaults.baseURL，請求的基本地址，并在請求攔截器中設置headers

axios.interceptors.request.use(config=>{
? NProgress.start();
? // 發(fā)送請求需帶上token
? config.headers.Authorization=window.sessionStorage.getItem("token")
? return config;
})

使用el-upload上傳組件時，action 為必選參數(shù)，上傳的地址。

但此時我們?yōu)閍ction填寫地址不能不寫基本地址而僅寫upload，要寫完整的地址。

這是因為el-upload上傳組件在上傳發(fā)送請求時，不會去使用我們設置的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"),
? ? ? },

element-ui中的upload組件使用總結

element-ui官網

使用upload組件：

<el-upload
? ?class="upload-demo"
? ?ref="uploadFile"
? ?:on-change="beforeUpload"
? ?:action="uploadUrl"
? ?:headers="myHeader"
? ?:on-remove="handleRemove"
? ?:before-remove="beforeRemove"
? ?:limit="1"
? ?:auto-upload="false"
? ?:on-exceed="handleExceed"
>
<el-button size="small" type="primary">選擇文件</el-button>

action: 是請求后端接口的路徑（必填的）
header: 是配置請求頭的 / 在此處帶了token
on-change: 文件狀態(tài)改變時的鉤子，添加文件、上傳成功和上傳失敗時都會被調用
on-remove: 是文件列表中移除文件時執(zhí)行的
before-remove: 刪除文件之前執(zhí)行的，可以用作提示用戶二次確認刪除
limit: 是上傳文件的個數(shù)
auto-upload: 是控制是否自動上傳的
on-exceed: 上傳文件個數(shù)超過限制的時候執(zhí)行的

此處添加的ref是為了在用戶點擊關閉后清空列表

通過clearFiles方法，這也是element提供的。

addDialogClose(){
? this.$refs.ruleForm.resetFields();
? this.addClassroomShow = false
? this.$refs.upload.clearFiles();
}

在使用時最坑的地方就是action屬性不能及時響應數(shù)據(jù)跟新，總是晚一步。

使用了before-upload、on-progress都不行，數(shù)據(jù)已經更改，但是action里還是舊的。

研究一下午：

將auto-upload屬性設置為false,

然后使用了on-change

在on-change鉤子中，去判斷文件后綴，來確定文件類型，來確定調用不同的接口

然后通過ref屬性去執(zhí)行上傳

beforeUpload(file) {
? if(/\.(mp4|m3u8|rmvb|avi|swf|3gp)$/.test(file.name)) {
? ? ?this.ruleForm.uploadUrl = this.vidoeUploadUrl
? }else{
? ? ?this.ruleForm.uploadUrl = this.fileUploadUrl
? }
? this.$nextTick(()=>{
? ? ?this.$refs.uploadFile.submit()
? })
},

此時就ok了！

如果action是死路徑就不需要考慮這些問題了。如果是動態(tài)的，就讓它異步，或給它加個延時器。

總結：upload組件已經封裝的很好了，只是action屬性是必填的，有點坑。以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: