亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2023-05-10 15:57:11 來源:億速云 閱讀:509 作者:iii 欄目:開發技術

這篇文章主要介紹“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問題怎么解決”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識,可以關注億速云行業資訊頻道,小編每天都會為大家更新不同的知識點。

    向AI問一下細節

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    AI

    冀州市| 兰西县| 德庆县| 黔西| 宣化县| 玛纳斯县| 乳源| 夹江县| 萨嘎县| 嘉鱼县| 讷河市| 镇巴县| 马鞍山市| 台中市| 三门峡市| 泽普县| 枣庄市| 江孜县| 深州市| 莫力| 屯留县| 云梦县| 从江县| 康乐县| 阜城县| 鸡西市| 乌兰察布市| 农安县| 九台市| 安达市| 通州区| 呼图壁县| 崇文区| 台中市| 东阿县| 嘉兴市| 长治市| 汶川县| 双鸭山市| 隆尧县| 从化市|