怎么用springboot和Vue3完成文件上传

在Spring Boot和Vue 3环境中完成文件上传，通常需要前端发送请求到后端，后端接收文件并进行处理。下面是大致的步骤和实现方法：

### 后端Spring Boot部分：

1. **创建文件上传的Controller**：
在Spring Boot中创建一个Controller来处理文件上传的请求。可以使用`@RestController`注解标记，同时使用`@PostMapping`注解来接收文件上传请求。

2. **使用`MultipartFile`接收文件**：
在Controller的方法中，可以使用`MultipartFile`类型的参数来接收上传的文件。Spring会自动将上传的文件封装成`MultipartFile`对象。

3. **处理文件保存**：
在Controller方法中，编写逻辑来处理文件的保存。通常将文件保存到磁盘或者数据库中。

示例代码：

   @RestController
   @RequestMapping("/api")
   public class FileUploadController {

       @PostMapping("/upload")
       public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) {
           if (file.isEmpty()) {
               return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("文件不能为空");
           }
           // 保存文件逻辑
           try {
               File targetFile = new File("上传路径" + file.getOriginalFilename());
               file.transferTo(targetFile);
               return ResponseEntity.ok("文件上传成功");
           } catch (IOException e) {
               return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("文件保存失败");
           }
       }
   }

### 前端Vue 3部分：

1. **创建文件上传表单**：
在Vue组件中，使用`<form>`标签创建一个表单，使用`enctype="multipart/form-data"`属性来允许文件上传。

2. **使用`v-model`绑定文件输入**：
使用`v-model`来绑定`<input type="file">`，这样你就可以在Vue组件的data中访问选中的文件。

3. **使用`axios`发送文件**：
使用`axios`库来发送文件到后端。需要配置`Content-Type`为`multipart/form-data`，并将文件作为`FormData`对象的一部分发送。

示例代码：

   <template>
     <form @submit.prevent="uploadFile">
       <input type="file" v-model="file" />
       <button type="submit">上传</button>
     </form>
   </template>

   <script setup>
   import { ref } from 'vue';
   import axios from 'axios';

   const file = ref(null);

   const uploadFile = async () => {
     if (!file.value) {
       alert('请选择文件');
       return;
     }

     const formData = new FormData();
     formData.append('file', file.value);

     try {
       const response = await axios.post('/api/upload', formData, {
         headers: {
           'Content-Type': 'multipart/form-data'
         }
       });
       alert('文件上传成功');
     } catch (error) {
       alert('文件上传失败');
       console.error(error);
     }
   };
   </script>

### 注意事项：

- 确保后端的文件上传路径存在，并且有相应的写权限。
- 前端和后端都应该有错误处理的逻辑，以便于在文件上传失败时能够通知用户。
- 根据实际需求，可能需要对上传的文件进行类型检查、大小限制等安全校验。