element自定義多文件上傳觸發多次on-change問題怎么解決

這篇文章主要介紹“element自定義多文件上傳觸發多次on-change問題怎么解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“element自定義多文件上傳觸發多次on-change問題怎么解決”文章能幫助大家解決問題。

element自定義 多文件上傳 觸發多次on-change

由于項目需要，圖片上傳需要進行壓縮之后在調用接口，那就只能走自定義上傳

自定義上傳關鍵在于：

• action  = #

• :auto-upload="false"

<el-upload
    ref="upload"
    action="#"  // 上傳入口改成 #
    :multiple="true" // 多文件上傳開啟
    :on-change="handleChange" // 改變監聽
    :file-list="fileList"  //文件列表
    :auto-upload="false" // 自動上傳關閉
>
    <i class="el-icon-plus"></i>
</el-upload>

由于 auto-upload 設置為 false 之后，before-upload 會失效，所以上傳的事件之前體現在 change 里。

但是這樣呢在上傳文件時無論是多圖還是單圖，在上傳后都會走2次 handleChange ，

此時我們需要一個防抖方法，來限制它。

handleChange(file, fileList) {
  /*
      自動上傳改成true會導致重復觸發，所以在handleChange上傳文件
    */
  //  防抖
  let length = fileList.length
  this.maxLength = Math.max(length, this.maxLength)
  setTimeout(() => {
    if (length === this.maxLength) {
      // 你的上傳文件邏輯
    }
  }, 100)
}

this.maxLength 默認設置 0 就行，要記得在上傳成功（完成）后需要設置為默認 0。

下面附上我完整的代碼

change 事件

handleChange(file, fileList) {
  /*
      自動上傳改成true會導致重復觸發，所以在handleChange上傳文件
    */
  //  防抖
  let length = fileList.length
  this.maxLength = Math.max(length, this.maxLength)
  setTimeout(() => {
    if (length === this.maxLength) {
        // 圖片驗證
      this.uploadFilesVerification(fileList)
    }
  }, 100)
}

圖片驗證： uploadFilesVerification

// 圖片驗證
async uploadFilesVerification(fileList) {
  let resFileList = []
  for (const key in fileList) {
    console.log('fileList[key] :>> ', fileList[key])
    // 判斷文件大小(5M)
    if (fileList[key].size > 1024 * 1024 * 5) {
      this.$message.warning('圖片大小不可以超過5M')
      return
    }
    // 圖片壓縮(這里用的 lrz，項目不需要可以忽略)
    const lrzData = await lrz(fileList[key].raw, { quality: 0.5 })
    // 內容驗證
    //  xxxx
 
    resFileList.push(lrzData.origin)
  }
 
  // 上傳圖片
  this.customUploadFn(resFileList)
 
}

自定義上傳：customUploadFn

// 自定義上傳
async function customUploadFn(fileList) {
  let form = new FormData()
  fileList.forEach((item) => {
    form.append('files', item)
  })
  const { data } = await uploadFiles(form) // 上傳 api 接口
  console.log('data :>> ', data)
  data.forEach((item) => {
    this.goodsImgList.push(item) // 圖片回顯數組
  })
  this.fileList = [] // 清空圖片已經上傳的圖片列表（綁定在上傳組件的file-list）
  this.maxLength = 0 // 恢復默認值
}

el-upload自定義上傳觸發多次change事件解決

昨天在做項目時，有個附件上傳的需求，需要使用formdata上傳文件，并且支持多文件上傳，使用el-upload on-change時發現會調用多次，以下是我整理出來規避的方法。

vue部分：

<el-upload
 :on-change="handleUpload"
 :on-remove="handleRemove"
 :auto-upload="false"
 :show-file-list="false"
 drag
 action="#"
 ref="upload"
 multiple
 
 >
  <div class="el-upload__text">拖拽文件或點擊上傳</div>
</el-upload>

ts/js部分：

  // 附件上傳
  private handleUpload(file, fileList) {
    let length = fileList.length;
    this.maxFileLength = Math.max(length, this.maxFileLength)
    setTimeout(() => {
      if (this.maxFileLength !== length) {
        return
      }
      fileList.forEach(item => {
        this.fileList.push(item.raw)
      })
    }, 0)
  }

定義一個全局變量maxFileLength 用于計算當前上傳次數，如果上傳次數等于上傳文件的數量長度則將文件放到當前下發文件的參數中。

關于“element自定義多文件上傳觸發多次on-change問題怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。