springboot + vue 文件上传及展示

SpringBoot 结合 Vue.js 实现文件上传和展示通常涉及前端使用 Vue 的表单组件来处理用户的文件选择，并通过 Axios 或者其他 HTTP 客户端库发送到 SpringBoot 后端。后端则使用 SpringMVC 或者 Spring WebFlux 接收并存储文件，同时返回文件信息。

以下是基本步骤：

1. **前端（Vue）**:
- 使用 `vue-file-upload` 或者 `axios-file-upload` 这样的插件处理文件选择事件。

   <input type="file" @change="uploadFile" />

- 在 Vue 中编写上传函数 `uploadFile`，将文件数据发给后端。

   methods: {
     uploadFile(e) {
       const file = e.target.files[0];
       axios.post('/api/file/upload', { file }, { headers: {'Content-Type': 'multipart/form-data'} });
     }
   }

2. **后端（SpringBoot）**:
- 使用 `@PostMapping` 注解创建接收文件的 RESTful API 接口，例如 `/api/file/upload`。

   @PostMapping("/upload")
   public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) {
       // 存储文件并返回响应信息
   }

- 在这里，你可以将文件保存到本地存储、数据库或者其他支持的存储系统，并返回文件ID或URL以便前端展示。

3. **文件展示**:
- 返回的文件信息可以包含文件名、路径等，然后前端在成功接收到响应后，可以将这些信息显示在一个区域，通常是图片链接的形式。