element-ui Upload上傳組件動態(tài)配置action方式
更新時(shí)間：2023年07月18日 14:29:16 作者：猴子請來的水軍。
這篇文章主要介紹了element-ui Upload上傳組件動態(tài)配置action方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
element-ui Upload上傳組件動態(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è)置上傳的請求頭部
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
// 此處動態(tài)配置action URL
this.upload.newurl = this.upload.url + this.upload.relationid;
// dom上傳地址更新完成后，觸發(fā)上傳
this.$nextTick(() => resolve());
});
},
}element-ui upload上傳組件動態(tài)配置action遇到的的坑
element-ui中，使用upload上傳組件時(shí)，很多時(shí)候需要帶上文件的信息，這就需要動態(tài)配置action。
我遇到的情況是
配置action后上傳時(shí)會報(bào)錯(cuò)，或者所帶的信息是上一次上傳的信息。
這是因?yàn)閑lement的上傳方法先執(zhí)行，action的動態(tài)響應(yīng)后執(zhí)行。
解決方法
給上傳方法加個(gè)延時(shí)器
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vscode中eslint插件的配置（prettier配置無效）
這篇文章主要介紹了vscode中eslint插件的配置（prettier配置無效），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
最近一段時(shí)間，一直在做主題方面的工作。我們的主題，并不是簡單切換一下顏色，或者排版變化這些，而是變化比較大的主題。比如說：主題1和主題2看起來完全不一樣，功能甚至都不一樣。這樣，通過切換css就無法做到了，因此我思考良久，使用了如下2種方法2021-06-06
這篇文章主要為大家介紹了Vue冷門技巧遞歸組件實(shí)踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家詳細(xì)介紹了Vue組件開發(fā)之異步組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Vue監(jiān)聽事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法
今天小編就為大家分享一篇Vue監(jiān)聽事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Pinia是一個(gè)同時(shí)支持Vue2和Vue3的應(yīng)用狀態(tài)管理工具,簡單來說就是為了管理整個(gè)應(yīng)用中的響應(yīng)式數(shù)據(jù),解決各個(gè)組件交互時(shí)數(shù)據(jù)狀態(tài)的不好管理的問題,下面這篇文章主要給大家介紹了關(guān)于vue3搭配pinia踩坑的相關(guān)資料,需要的朋友可以參考下2022-04-04
vuex刷新頁面后如何解決丟失store的數(shù)據(jù)問題
這篇文章主要介紹了vuex刷新頁面后如何解決丟失store的數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
本篇文章主要介紹了vue項(xiàng)目使用sass的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
vue項(xiàng)目前端埋點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目前端埋點(diǎn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了element中el-select的使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01