element-ui Upload上傳組件動(dòng)態(tài)配置action方式
更新時(shí)間：2023年07月18日 14:29:16 作者：猴子請(qǐng)來(lái)的水軍。
這篇文章主要介紹了element-ui Upload上傳組件動(dòng)態(tài)配置action方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
element-ui Upload上傳組件動(dòng)態(tài)配置action
<el-upload class="upload-file" ref="upload" :limit="currentTableData.length" :headers="upload.headers" :action="upload.newurl" :on-exceed="handleExceed" :before-remove="beforeRemove" :before-upload="handleFileBefore" :auto-upload="false" multiple >
export default {
data() {
return {
// 上傳參數(shù)
upload: {
// 設(shè)置上傳的請(qǐng)求頭部
headers: { Authorization: "Bearer " + getToken() },
// 上傳的地址
newurl:'',
url: process.env.VUE_APP_BASE_API + "/nfm/nfmfile/upload/",
relationid:null,
},
}
},
methods: {
handleExceed(files, fileList) {
this.$message.warning(`當(dāng)前限制選擇 ${this.currentTableData.length} 個(gè)文件，本次選擇了 ${files.length} 個(gè)文件，共選擇了 ${files.length + fileList.length} 個(gè)文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`確定移除 ${ file.name }？`);
},
handleFileBefore(file){
return new Promise((resolve, reject) => {
// 拼接上傳url
// 此處動(dòng)態(tài)配置action URL
this.upload.newurl = this.upload.url + this.upload.relationid;
// dom上傳地址更新完成后，觸發(fā)上傳
this.$nextTick(() => resolve());
});
},
}element-ui upload上傳組件動(dòng)態(tài)配置action遇到的的坑
element-ui中，使用upload上傳組件時(shí)，很多時(shí)候需要帶上文件的信息，這就需要?jiǎng)討B(tài)配置action。
我遇到的情況是
配置action后上傳時(shí)會(huì)報(bào)錯(cuò)，或者所帶的信息是上一次上傳的信息。
這是因?yàn)閑lement的上傳方法先執(zhí)行，action的動(dòng)態(tài)響應(yīng)后執(zhí)行。
解決方法
給上傳方法加個(gè)延時(shí)器
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue項(xiàng)目路徑不正確,自動(dòng)跳轉(zhuǎn)404的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目路徑不正確,自動(dòng)跳轉(zhuǎn)404的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)掃碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
在管理系統(tǒng)中，常常需要在頂部tags顯示瀏覽歷史。本文將教大家如何通過(guò)Vue實(shí)現(xiàn)這一功能，文中的示例代碼講解詳細(xì)，需要的可以參考一下2021-12-12
vue項(xiàng)目debugger調(diào)試看不到源碼的問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目debugger調(diào)試看不到源碼的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue3中對(duì)數(shù)組去重的方法總結(jié)
隨著開(kāi)發(fā)語(yǔ)言及人工智能工具的普及,使得越來(lái)越多的人會(huì)主動(dòng)學(xué)習(xí)使用一些開(kāi)發(fā)工具,本文主要介紹了Vue數(shù)組去重的幾種方法,結(jié)合 Vue 3 的響應(yīng)式特性實(shí)現(xiàn)數(shù)據(jù)更新,需要的朋友可以參考下2025-09-09
Vue中使用Openlayer實(shí)現(xiàn)加載動(dòng)畫(huà)效果
這篇文章主要介紹了Vue+Openlayer加載動(dòng)畫(huà)效果的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08
ElementUI 詳細(xì)分析DatePicker 日期選擇器實(shí)戰(zhàn)
這篇文章主要介紹了ElementUI詳細(xì)分析DatePicker 日期選擇器實(shí)戰(zhàn)教程,本文通過(guò)實(shí)例代碼圖文介紹給大家講解的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
基于iview-admin實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼
這篇文章主要介紹了基于iview-admin實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
回到頂部在很多網(wǎng)頁(yè)中都可以見(jiàn)到，本文主要介紹了Vue3 封裝回到頂部組件的實(shí)現(xiàn)示例，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
關(guān)于vue-cli 3配置打包優(yōu)化要點(diǎn)（推薦）
這篇文章主要介紹了vue-cli 3配置打包優(yōu)化要點(diǎn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04