el-upload组件在使用自动上传多文件模式时,会多次请求接口,为了避免多次请求,改为在同一个请求中同时上传多个文件,代码如下,通过dom数量判断何时应该上传

<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 // 上传文件数量
        let limit = 15 // 限制上传文件数量
        // 判断当前文件是否是最后一个文件
        if (this.fileList.length === maxLen) {
          // 上传文件数量大于限制数量
          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>