element?upload鉤子函數的坑怎么解決

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

element upload 鉤子函數的坑

因為需求需要我將element 的upload組件放在了el-dialog中，但是坑就在這

看圖片的上方是不是可以看到上傳成功四個大字，但是它并不是真的在上傳成功后顯示出來的，只要頁面加載成功，打開和關閉el-dialog都會出來這四個大字，來看代碼

這是upload部分設置代碼：

（請忽略方法名稱的不規范，這里只做個演示）

on-success調用的方法

success () {
  this.$message.success('上傳成功')
}

以上可以看出我們并沒有上傳文件，但是卻觸發了上傳成功的鉤子，不僅僅on-success是這樣，on-error也是會被這樣觸發。

所以最后我把代碼改成了如下：

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會返回一個數組，里邊包含了這么一些東西

其中包含的有后端返回的請求成功的狀態值，最終我是通過這個來判斷是否上傳成功，規避了在打開和關閉el-dialog就觸發鉤子的問題

element-ui中組件函數鉤子自帶參數,不能添加參數問題

在element-ui中的組件函數鉤子一般都是自帶參數如：

//上傳組件
<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函數自帶file, fileList這兩參數

beforeRemove（file, fileList）{
//就這兩參數
}

那么想要帶自己的參數呢，，尤其一般在表格中的上傳，肯定要攜帶當前一行的參數（動態參數）時；

我們對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 一個函數，并攜帶data（自己想要的參數）

這樣在函數beforeRemove中就可以拿到data了

beforeRemove（file,fileList,data）{
debugger
}

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