如何在ElementUI的上傳組件el-upload中設(shè)置header
在ElementUI上傳組件el-upload中設(shè)置header
在vue項(xiàng)目中我們發(fā)送ajax請求一般都會使用axios,并在axios中設(shè)置axios.defaults.baseURL,請求的基本地址,并在請求攔截器中設(shè)置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,要寫完整的地址。
這是因?yàn)閑l-upload上傳組件在上傳發(fā)送請求時,不會去使用我們設(shè)置的axios,而是在組件內(nèi)部自己封裝了自己的請求方法。所以我們必須把地址寫完整。
那有時在上傳時會報出錯誤,例如‘無效token’,這是因?yàn)槲覀儧]有為此上傳請求設(shè)置請求頭部。el-upload組件有一個屬性headers ,設(shè)置上傳的請求頭部
?<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">點(diǎn)擊上傳</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組件使用總結(jié)
使用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
: 是配置請求頭的 / 在此處帶了tokenon-change
: 文件狀態(tài)改變時的鉤子,添加文件、上傳成功和上傳失敗時都會被調(diào)用on-remove
: 是文件列表中移除文件時執(zhí)行的before-remove
: 刪除文件之前執(zhí)行的,可以用作提示用戶二次確認(rèn)刪除limit
: 是上傳文件的個數(shù)auto-upload
: 是控制是否自動上傳的on-exceed
: 上傳文件個數(shù)超過限制的時候執(zhí)行的
此處添加的ref是為了在用戶點(diǎn)擊關(guān)閉后清空列表
通過clearFiles方法,這也是element提供的。
addDialogClose(){ ? this.$refs.ruleForm.resetFields(); ? this.addClassroomShow = false ? this.$refs.upload.clearFiles(); }
在使用時最坑的地方就是action屬性不能及時響應(yīng)數(shù)據(jù)跟新,總是晚一步。
使用了before-upload、on-progress都不行,數(shù)據(jù)已經(jīng)更改,但是action里還是舊的。
研究一下午:
將auto-upload屬性設(shè)置為false,
然后使用了on-change
在on-change鉤子中,去判斷文件后綴,來確定文件類型,來確定調(diào)用不同的接口
然后通過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)的,就讓它異步,或給它加個延時器。
總結(jié):upload組件已經(jīng)封裝的很好了,只是action屬性是必填的,有點(diǎn)坑。以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用 vue 實(shí)現(xiàn)滅霸打響指英雄消失的效果附demo
這篇文章主要介紹了使用 vue 實(shí)現(xiàn)滅霸打響指英雄消失的效果 demo,需要的朋友可以參考下2019-05-05mpvue中使用flyjs全局?jǐn)r截的實(shí)現(xiàn)代碼
這篇文章主要介紹了mpvue中使用flyjs全局?jǐn)r截的實(shí)現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)
這篇文章主要介紹了vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09Vue3使用hook封裝媒體查詢和事件監(jiān)聽的代碼示例
這篇文章主要給大家詳細(xì)介紹Vue3如何使用hook封裝媒體查詢和事件監(jiān)聽,使得Vue的開發(fā)更加絲滑,文中通過代碼示例給大家介紹的非常詳細(xì),感興趣的同學(xué)跟著小編一起來學(xué)習(xí)吧2023-07-07vue兩個輸入框聯(lián)動校驗(yàn)方式(最大值-最小值)
這篇文章主要介紹了vue兩個輸入框聯(lián)動校驗(yàn)方式(最大值-最小值),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10