【学习记录21】Vue+ElementUI el-upload多文件上传，一次请求上传多个文件！

在Vue中使用el-upload组件实现多文件的同时上传，可以通过设置el-upload的multiple属性来允许多文件选择，并通过before-upload钩子函数来处理文件的整体请求。以下是一个简单的例子：

<template>
  <el-upload
    :action="uploadUrl"
    :before-upload="handleBeforeUpload"
    :on-success="handleSuccess"
    multiple>
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      uploadUrl: '你的上传接口地址',
      fileList: []
    };
  },
  methods: {
    handleBeforeUpload(file) {
      this.fileList.push(file); // 将所有上传的文件添加到数组中
      if (this.fileList.length === files.length) { // 当文件数量达到上限时
        const formData = new FormData();
        this.fileList.forEach((file, index) => {
          formData.append(`file${index}`, file);
        });
        this.fileList = []; // 重置文件列表
 
        // 使用axios或者其他HTTP库发送请求
        // axios.post(this.uploadUrl, formData).then(this.handleSuccess).catch(this.handleError);
 
        // 模拟请求成功的处理
        this.handleSuccess();
      }
 
      return false; // 阻止默认上传行为
    },
    handleSuccess() {
      this.$message.success('上传成功');
    },
    handleError() {
      this.$message.error('上传失败');
    }
  }
};
</script>

在这个例子中，我们使用了handleBeforeUpload方法来收集所有选定的文件，并在文件数组达到预期长度时创建一个FormData对象来发送请求。注意，由于我们阻止了默认的上传行为，因此需要手动处理文件的上传。在这个例子中，我们使用了模拟的handleSuccess和handleError方法来代替实际的HTTP请求，并展示了成功或失败的消息。在实际应用中，你需要使用Axios或其他HTTP库来发送真实的请求。