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