詳解element上傳組件before-remove鉤子問題解決
更新時(shí)間：2020年04月08日 11:12:02 作者：pledge_言
這篇文章主要介紹了詳解element上傳組件before-remove鉤子問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
應(yīng)公司業(yè)務(wù)要求已上傳文件刪除前提醒確認(rèn)代碼如下
if(file && file.status === "success"){
return this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '系統(tǒng)提示',{
confirmButtonText: '確認(rèn)',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
this.$message({
type: 'success',
message: '刪除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消刪除!'
});
reject(false);
});
};
確認(rèn)會(huì)直接調(diào)用on-remove方法具體業(yè)務(wù)代碼如下
if (file && file.status==="success") {
this.$axios.delete("url" + data);
}
下面是 before-upload 上傳文件前的鉤子，在遇到大于10M的文件時(shí)，我們返回false
//圖片上傳前鉤子
beforeUpload(file) {
this.loading = true;
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
this.loading = false;
this.$message.error("單個(gè)附件大小不能超過 10MB!");
}
return isLt2M;
// return false;
}
但是這時(shí)會(huì)出現(xiàn)自動(dòng)調(diào)用before-remove on-remove鉤子
其實(shí)此時(shí)我們根本沒有上傳文件，所以也不會(huì)需要?jiǎng)h除操作，然后我的代碼就報(bào)錯(cuò)了。
解決辦法如下：
//刪除圖片
beforeRemove(file, fileList) {
let a = true;
if (file && file.status==="success") {
a = this.$confirm(`確定移除 ${ file.name }？`);
}
return a;
},
//刪除圖片
handleRemove(file, fileList) {
if (file && file.status==="success") {
this.$axios.delete("accessory/one/" + file.response.id).then(resp => {
if (resp.status == 200) {
this.$message({
message: "刪除成功",
type: "success"
});
}
});
}
},
把不需要執(zhí)行的代碼放入判斷內(nèi)。
if (file && file.status==="success") {
}
到此這篇關(guān)于詳解element上傳組件before-remove鉤子問題解決的文章就介紹到這了,更多相關(guān)element上傳組件before-remove鉤子內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vuex中如何getters動(dòng)態(tài)獲取state的值
這篇文章主要介紹了Vuex中如何getters動(dòng)態(tài)獲取state的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
單向數(shù)據(jù)流方式使用一個(gè)上傳數(shù)據(jù)流和一個(gè)下傳數(shù)據(jù)流進(jìn)行雙向數(shù)據(jù)通信,兩個(gè)數(shù)據(jù)流之間相互獨(dú)立,下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue是一種流行的Web開發(fā)框架,它提供了一個(gè)雙向綁定的語法糖。在Vue中,我們可以很容易地獲取頁面上的數(shù)據(jù),并且可以實(shí)時(shí)的響應(yīng)其變化,這篇文章主要給大家介紹了關(guān)于Vue獲取input值的四種常用方法,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了IDEA安裝vue插件圖文，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
vue-element-admin+flask實(shí)現(xiàn)數(shù)據(jù)查詢項(xiàng)目的實(shí)例代碼
這篇文章主要介紹了vue-element-admin+flask實(shí)現(xiàn)數(shù)據(jù)查詢項(xiàng)目,填寫數(shù)據(jù)庫連接信息和查詢語句，即可展示查詢到的數(shù)據(jù)，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue修改Dom不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
函數(shù)式組件就是函數(shù)是組件,組件是函數(shù),它的特征是沒有內(nèi)部狀態(tài)、沒有生命周期鉤子函數(shù)、沒有this（不需要實(shí)例化的組件）,這篇文章主要給大家介紹了關(guān)于Vue.js函數(shù)式組件的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細(xì)介紹了Vue異步加載about組件的相關(guān)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
在Vue3中實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)的代碼示例
Vue3作為目前最熱門的前端框架之一,以其輕量化、易用性及性能優(yōu)勢(shì)吸引了大量開發(fā)者,在開發(fā)過程中,不可避免地需要在組件之間傳遞數(shù)據(jù),本文將詳細(xì)講解在Vue3中如何實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù),并通過具體示例代碼使概念更加清晰2024-07-07
這篇文章主要介紹了vue-cli 3.0 使用全過程，本文通過項(xiàng)目實(shí)例相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-06-06