element?upload?鉤子函數(shù)的坑及解決
element upload 鉤子函數(shù)的坑
因為需求需要我將element 的upload組件放在了el-dialog中，但是坑就在這
看圖片的上方是不是可以看到上傳成功四個大字，但是它并不是真的在上傳成功后顯示出來的，只要頁面加載成功，打開和關(guān)閉el-dialog都會出來這四個大字，來看代碼
這是upload部分設(shè)置代碼：
（請忽略方法名稱的不規(guī)范，這里只做個演示）
on-success調(diào)用的方法
success () {
? this.$message.success('上傳成功')
}以上可以看出我們并沒有上傳文件，但是卻觸發(fā)了上傳成功的鉤子，不僅僅on-success是這樣，on-error也是會被這樣觸發(fā)。
所以最后我把代碼改成了如下：
el-upload部分代碼：
<el-upload ? ? ? ? class="upload-demo" ? ? ? ? ref="upload" ? ? ? ? drag ? ? ? ? :action="uploadBusinessType" ? ? ? ? accept=".xls, .xlsx, .csv" ? ? ? ? :auto-upload="false" ? ? ? ? :on-success="handleAvatarSuccess" ? ? ? ? multiple ? ? ? >
方法的代碼：
handleAvatarSuccess(...params) {
? ? ‘這里代碼就不在表述'
? ? }…params會返回一個數(shù)組，里邊包含了這么一些東西
其中包含的有后端返回的請求成功的狀態(tài)值，最終我是通過這個來判斷是否上傳成功，規(guī)避了在打開和關(guān)閉el-dialog就觸發(fā)鉤子的問題
element-ui中組件函數(shù)鉤子自帶參數(shù),不能添加參數(shù)問題
在element-ui中的組件函數(shù)鉤子一般都是自帶參數(shù)如：
//上傳組件 <el-upload ? class="upload-demo" ? action="https://jsonplaceholder.typicode.com/posts/" ? :on-preview="handlePreview" ? :on-remove="handleRemove" ? :before-remove="**beforeRemove**" ? multiple ? :limit="3" ? :on-exceed="handleExceed" ? :file-list="fileList"> ? <el-button size="small" type="primary">點擊上傳</el-button> ? <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div> </el-upload>
API中解釋：
on-remove 文件列表移除文件時的鉤子 function(file, fileList)
也就是上面的beforeRemove函數(shù)自帶file, fileList這兩參數(shù)
beforeRemove（file, fileList）{
//就這兩參數(shù)
}那么想要帶自己的參數(shù)呢，，尤其一般在表格中的上傳，肯定要攜帶當(dāng)前一行的參數(shù)（動態(tài)參數(shù)）時；
我們對before-remove屬性修改
//上傳組件
<el-upload
? class="upload-demo"
? action="https://jsonplaceholder.typicode.com/posts/"
? :on-preview="handlePreview"
? :on-remove="handleRemove"
? :before-remove="（file,fileList）=>{
? ? ?return beforeRemove（file,fileList,data）
}"
? multiple
? :limit="3"
? :on-exceed="handleExceed"
? :file-list="fileList">
? <el-button size="small" type="primary">點擊上傳</el-button>
? <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>在before-remove上在return 一個函數(shù)，并攜帶data（自己想要的參數(shù)）
這樣在函數(shù)beforeRemove中就可以拿到data了
beforeRemove（file,fileList,data）{
debugger
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何使用vue-pdf-embed實現(xiàn)PDF在線預(yù)覽
vue-pdf-embed是一個基于Vue.js的插件,專門用于在Vue應(yīng)用中嵌入和展示PDF文件,本文將使用vue-pdf-embed實現(xiàn)PDF在線預(yù)覽功能,有需要的小伙伴可以參考一下2025-03-03
Vue配合iView實現(xiàn)省市二級聯(lián)動的示例代碼
本篇文章主要介紹了Vue配合iView實現(xiàn)省市二級聯(lián)動的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Vue3使用dayjs以及dayjs日期工具類,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
插槽(slot)作用是讓父組件可以往子組件指定位置插入?html?結(jié)構(gòu),也是組件的一種通信方式,下面這篇文章主要給大家介紹了關(guān)于vue2組件進階與插槽的相關(guān)資料,需要的朋友可以參考下2023-02-02
provide/inject 適用于跨級通信，在孫組件中通過依賴注入的方式能獲取到父組件中改變的這個值，下面通過實例代碼介紹vue3-組合式api-provide/inject的相關(guān)知識,需要的朋友可以參考下2022-11-11
本文主要介紹了如何在vue中使用jsx語法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue 2.0+Vue-router構(gòu)建一個簡單的單頁應(yīng)用（附源碼）
這篇文章主要給大家介紹了基于Vue 2.0+Vue-router構(gòu)建了一個簡單的單頁應(yīng)用，文中通過實例介紹的非常詳細，并在文末給出了源碼下載，需要的朋友可以下載學(xué)習(xí)參考，下面來一起看看吧。2017-03-03
解決vant的Cascader級聯(lián)選擇組建css樣式錯亂問題
這篇文章主要介紹了解決vant的Cascader級聯(lián)選擇組建css樣式錯亂問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家介紹了nextTick能否獲取到最新dom原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
今天小編就為大家分享一篇Vue2.0 實現(xiàn)頁面緩存和不緩存的方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11