美文网首页
el-upload 批量上传问题,如何在一次上传中,自动上传文件

el-upload 批量上传问题,如何在一次上传中,自动上传文件

作者: 淡然7698 | 来源:发表于2023-03-28 15:21 被阅读0次

    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>
    

    相关文章

      网友评论

          本文标题:el-upload 批量上传问题,如何在一次上传中,自动上传文件

          本文链接:https://www.haomeiwen.com/subject/tstxddtx.html