詳解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);
});
};
確認會直接調(diào)用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;
}
但是這時會出現(xiàn)自動調(diào)用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í)行的代碼放入判斷內(nèi)。
if (file && file.status==="success") {
}
到此這篇關于詳解element上傳組件before-remove鉤子問題解決的文章就介紹到這了,更多相關element上傳組件before-remove鉤子內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue 中動態(tài)綁定class 和 style的方法代碼詳解
這篇文章主要介紹了vue 中動態(tài)綁定class 和 style的方法，通過實例結(jié)合的形式給大家接受的非常詳細，需要的朋友參考下吧2018-06-06
這篇文章主要給大家介紹了關于vue組件入門知識的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
IDEA創(chuàng)建Vue項目的兩種方式總結(jié)
這篇文章主要介紹了IDEA創(chuàng)建Vue項目的兩種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。2023-04-04
這篇文章主要介紹了詳解vue-cli@2.x項目遷移日志，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
vuex結(jié)合session存儲數(shù)據(jù)解決頁面刷新數(shù)據(jù)丟失問題
在項目中表單篩選項里，選擇完之后刷新頁面數(shù)據(jù)就變了，沒有保留在自己選擇的選項上。本文使用session存儲數(shù)據(jù)，具有一定的參考價值，感興趣的可以了解一下2021-09-09
Axios是一個基于Promise的HTTP客戶端，用于瀏覽器和Node.js，這篇文章主要介紹了axios在Vue3中的使用,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了如何利用Vue實現(xiàn)懸浮框自由移動+錄音功能，文中的示例代碼講解詳細，感興趣的小伙伴可以動手嘗試一下2022-07-07
這篇文章主要介紹了Vue組件生命周期運行原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了Vue使用axios引起的后臺session不同操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue自定義指令添加跟隨鼠標光標提示框v-tooltip方式
這篇文章主要介紹了vue自定義指令添加跟隨鼠標光標提示框v-tooltip方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10