el-upload組件在使用自動上傳多文件模式時,會多次請求接口,為了避免多次請求,改為在同一個請求中同時上傳多個文件,代碼如下,通過dom數(shù)量判斷何時應(yīng)該上傳

<template>
  <el-upload
    class="upload-file"
    action=""
    multiple
    ref="uploadRef"
    :accept="acceptList"
    :http-request="uploadFile"
    :file-list="fileList"
    :show-file-list="true"
    :auto-upload="true"
    :on-change="handleFileChange"
    v-loading="fileLoading"
  >
    <el-button
      size="small"
      icon="el-icon-upload2"
      :loading="fileLoading"
      type="primary"
    >
      批量上傳
    </el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileLoading: false,
      fileList: [],
      acceptList: '.doc,.docx,.pdf,.jpg,.jpeg,.png',
    }
  },
  methods: {
    handleFileChange(file, fileList) {
      this.fileList = fileList
    },
    // 文件上傳
    uploadFile(file) {
      // 避免多次請求 獲取上傳文件的長度 與 fileList的長度相等時才請求
      this.$nextTick(() => {
        let uploadlist = document.querySelectorAll(
          '.upload-file .el-upload-list.el-upload-list--text .el-upload-list__item'
        )
        let maxLen = uploadlist.length // 上傳文件數(shù)量
        let limit = 15 // 限制上傳文件數(shù)量
        // 判斷當前文件是否是最后一個文件
        if (this.fileList.length === maxLen) {
          // 上傳文件數(shù)量大于限制數(shù)量
          if (maxLen > limit) {
            this.$message({
              type: 'warning',
              message: `最多上傳${limit}個文件`,
            })
            this.$set(this, 'fileList', [])
            this.$refs.uploadRef.clearFiles()
            return
          }
          this.fileLoading = true
          const formData = new FormData()
          for (let i = 0; i < this.fileList.length; i++) {
            let raw = this.fileList[i].raw
            formData.append('fileList', raw)
          }

          // 清空文件列表
          this.$set(this, 'fileList', [])
          // 格式錯誤提示
          if (errorFlag) {
            this.$message({
              type: 'warning',
              message: `文件格式不正確,請使用${this.acceptList}格式文件`,
            })
            this.$refs.uploadRef.clearFiles()
            this.fileLoading = false
            return
          }
          batchAddApi(formData)
            .then(({ code, message, data }) => {
              if (code === '200') {
                this.$message.success('上傳成功')
              } else {
                this.$message.error('上傳失敗')
              }
            })
            .catch(err => {
              this.$message.error('上傳失敗')
              console.error('err:', err)
            })
            .finally(() => {
              // 上傳成功后清空文件列表
              this.$refs.uploadRef.clearFiles()
              this.fileLoading = false
            })
        }
      })
    },
  },
}
</script>