element ui 上传 使用自定义上传http-request多文件上传并且等待上一个文件上传完成再触发下一个文件上传

Element UI 提供了一个名为`el-upload`的组件，用于文件上传操作。如果你想要实现一个自定义的多文件上传功能，并且采用HTTP请求，并且保证每个文件上传都等待前一个文件上传完成后才开始下一次，可以按照以下步骤操作：

1. 首先，在Vue组件中引入`element-ui/upload`模块。

<template>
  <div>
    <el-upload
      ref="upload"
      :action="uploadUrl"
      multiple
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :on-change="handleChange"
    >
      <el-button slot="trigger">选择文件</el-button>
    </el-upload>
  </div>
</template>

<script>
import { ElUpload } from "element-ui";
export default {
  components: {
    ElUpload,
  },
  data() {
    return {
      uploadUrl: "your-custom-url",
      files: [],
      fileIndex: 0,
    };
  },
  methods: {
    handleSuccess(response, file) {
      // 处理成功回调，比如清除已上传文件
      this.files = this.files.filter(item => item !== file);
    },
    beforeUpload(file) {
      // 检查文件是否满足条件，如限制文件类型、大小等
      if (this.fileIndex > 0) {
        const prevFile = this.files[this.fileIndex - 1];
        return new Promise((resolve, reject) => {
          if (prevFile.status === "uploading") {
            resolve(false); // 如果前一个文件还在上传，则拒绝当前文件
          } else {
            resolve(true);
          }
        });
      } else {
        return true;
      }
    },
    handleChange(file) {
      this.files.push(file);
      this.fileIndex++;
    },
  },
};
</script>

在这个例子中，`before-upload`钩子被用来控制文件的上传顺序。当文件队列中还有未完成的上传时，会返回一个Promise，只有当Promise解析为`true`时才会允许当前文件开始上传。`handleSuccess`则负责处理每个文件上传后的结果。