Vue3 SpringBoot 多文件上传

Vue3 和 SpringBoot 配合使用时，处理多文件上传通常会涉及到前端的Vue组件和后端的Spring控制器。以下是一个简单的步骤概述：

1. **前端Vue**：
- 使用Vue.js的`@vue/upload`库或者Element Plus等UI框架提供的file-input组件，允许用户选择多个文件。
- `v-model`绑定到数组，存储选中的文件信息，如URL、名称等。
- 当用户完成选择并触发事件（如`@change`）时，将文件数据发送给后端。

<template>
  <el-upload
    :multiple="true"
    :on-change="handleFileChange"
    ...其他配置...
  ></el-upload>
</template>

<script>
export default {
  methods: {
    handleFileChange(files) {
      this.uploadFiles(files);
    },
    uploadFiles(files) {
      // 发送POST请求给SpringBoot API
    }
  }
}
</script>

2. **后端SpringBoot**：
- 创建一个REST API接口，接收`multipart/form-data`类型的请求，这个数据包含了文件的数据和一些额外的信息（如用户ID或操作ID）。
- 使用Spring的MultipartFile对象来处理接收到的文件，可以保存到服务器硬盘或上传到云存储服务。

@PostMapping("/api/upload")
public ResponseEntity<?> handleMultiFileUpload(@RequestParam("files") MultipartFile[] files, ...) {
   for (MultipartFile file : files) {
     if (!file.isEmpty()) { 
       try {
         // 保存文件到本地或上传到云端
       } catch (Exception e) {
         log.error("Failed to process file", e);
       }
     }
   }
   return ResponseEntity.ok().build();
}