element upload 鉤子函數的坑及解決

Posted on by

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
}

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：