vue 基于elementui el-upload multiple 多选上传文件 点击确定再一起上传

在Vue中使用Element UI的<el-upload>组件实现多文件选择后确认后再一起上传的功能，可以通过监听file-list变化和使用before-upload钩子函数来实现。以下是一个简单的示例：

<template>
  <div>
    <el-upload
      ref="upload"
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="text"
      multiple
      :auto-upload="false"
      :on-change="handleChange"
      :before-upload="handleBeforeUpload"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">确认上传</el-button>
    </el-upload>
  </div>
</template>
 
<script>
export default {
  methods: {
    handleChange(file, fileList) {
      // 当文件列表发生变化时的处理逻辑
      // 例如，可以在这里启用或禁用确认按钮
    },
    handleBeforeUpload(file) {
      // 可以在这里添加上传文件之前的逻辑，例如文件校验
      // 如果校验不通过，返回 false 会阻止文件的上传
      return true;
    },
    submitUpload() {
      this.$refs.upload.submit();
    }
  }
};
</script>

在这个示例中，<el-upload>组件被设置为不自动上传(auto-upload=false)，并绑定了file-list变化的处理函数handleChange和上传之前的校验函数handleBeforeUpload。当用户点击确认上传按钮时，调用submitUpload方法，该方法通过引用<el-upload>组件的submit方法触发文件上传。