vue 实现选择多个文件后，点击确认统一进行上传

在 Vue 中，实现选择多个文件后点击“确认”按钮统一进行上传，可以按照以下步骤进行：

1. **HTML 结构**:
首先创建一个表单结构，包含一个用于选择文件的 `input[type=file]`，以及一个用于触发上传的按钮（例如“确定”）。

<form @submit.prevent="uploadFiles">
  <input type="file" id="filesInput" @change="getFiles" multiple>
  <button type="submit">确定</button>
</form>

2. **Vue 数据绑定**:
初始化一个数据属性来存储选中的文件，然后在 `@change` 事件中更新这个属性。

data() {
  return {
    selectedFiles: []
  };
},
methods: {
  getFiles(e) {
    this.selectedFiles = e.target.files;
  },
  uploadFiles() {
    if (this.selectedFiles.length > 0) {
      // 发起上传请求
    } else {
      alert("请选择文件");
    }
  }
}

3. **上传方法**:
当用户点击“确定”按钮时，检查是否有选中的文件，如果有，则发起上传请求。这里假设你已经设置好了上传API或服务。

uploadFiles() {
  if (this.selectedFiles.length > 0) {
    this.sendFilesToServer(this.selectedFiles);
  } else {
    alert("请选择文件后再提交");
  }
}

sendFilesToServer(files) {
  // 使用 axios 或 fetch 将文件作为一个数组传递给后端API
  this.$axios.post('/api/upload-multiple', { files: this.selectedFiles })
    .then(response => {
      // 处理上传成功的响应
    })
    .catch(error => {
      // 处理错误
    });
}

4. **错误处理**:
检查是否选择了文件，如果为空则提示用户选择文件。