element?upload鉤子函數(shù)的坑怎么解決

本篇內(nèi)容介紹了“element upload鉤子函數(shù)的坑怎么解決”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

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ù)呢，，尤其一般在表格中的上傳，肯定要攜帶當前一行的參數(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
}

“element upload鉤子函數(shù)的坑怎么解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！