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)文章

vscode中eslint插件的配置（prettier配置無(wú)效）
這篇文章主要介紹了vscode中eslint插件的配置（prettier配置無(wú)效），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
vue實(shí)現(xiàn)主題切換的多種思路分享
最近一段時(shí)間，一直在做主題方面的工作。我們的主題，并不是簡(jiǎn)單切換一下顏色，或者排版變化這些，而是變化比較大的主題。比如說(shuō)：主題1和主題2看起來(lái)完全不一樣，功能甚至都不一樣。這樣，通過(guò)切換css就無(wú)法做到了，因此我思考良久，使用了如下2種方法
2021-06-06
Vue冷門技巧遞歸組件實(shí)踐示例詳解
這篇文章主要為大家介紹了Vue冷門技巧遞歸組件實(shí)踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
Vue組件開(kāi)發(fā)之異步組件詳解
這篇文章主要為大家詳細(xì)介紹了Vue組件開(kāi)發(fā)之異步組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
Vue監(jiān)聽(tīng)事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法
今天小編就為大家分享一篇Vue監(jiān)聽(tīng)事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue3搭配pinia的踩坑實(shí)戰(zhàn)記錄
Pinia是一個(gè)同時(shí)支持Vue2和Vue3的應(yīng)用狀態(tài)管理工具,簡(jiǎn)單來(lái)說(shuō)就是為了管理整個(gè)應(yīng)用中的響應(yīng)式數(shù)據(jù),解決各個(gè)組件交互時(shí)數(shù)據(jù)狀態(tài)的不好管理的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue3搭配pinia踩坑的相關(guān)資料,需要的朋友可以參考下
2022-04-04
vuex刷新頁(yè)面后如何解決丟失store的數(shù)據(jù)問(wèn)題
這篇文章主要介紹了vuex刷新頁(yè)面后如何解決丟失store的數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue2項(xiàng)目使用sass的示例代碼
本篇文章主要介紹了vue項(xiàng)目使用sass的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
vue項(xiàng)目前端埋點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目前端埋點(diǎn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
element中el-select的使用及說(shuō)明
這篇文章主要介紹了element中el-select的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01