el-upload 上传文件 自动

el-upload组件本身支持多文件上传，但是默认是并发上传，这样容易导致服务器压力过大。如果需要实现自动上传，可以通过设置属性`:auto-upload="false"`来禁用自动上传，然后在上传按钮的点击事件中手动调用上传方法`this.$refs.upload.submit()`来实现逐个上传文件的功能。具体实现可以参考以下代码：

<el-upload
  ref="upload"
  :auto-upload="false"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <el-button slot="trigger" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" type="success" @click="uploadFiles">上传文件</el-button>
</el-upload>

data() {
  return {
    fileList: [], // 上传的文件列表
    currentIndex: 0 // 当前上传的文件索引
  }
},
methods: {
  // 上传文件
  uploadFiles() {
    if (this.fileList.length === 0) {
      this.$message.warning('请先选择文件')
      return
    }
    this.currentIndex = 0 // 重置当前上传的文件索引
    this.uploadFile(this.fileList[this.currentIndex]) // 上传第一个文件
  },
  // 上传单个文件
  uploadFile(file) {
    this.$refs.upload.upload(file.raw) // 调用上传方法
  },
  // 上传成功回调
  handleSuccess(response, file, fileList) {
    this.currentIndex++ // 当前上传的文件索引加1
    if (this.currentIndex < this.fileList.length) {
      this.uploadFile(this.fileList[this.currentIndex]) // 继续上传下一个文件
    } else {
      this.$message.success('上传成功')
    }
  },
  // 上传失败回调
  handleError(err, file, fileList) {
    this.$message.error('上传失败')
  }
}