图片上传 springboot vue

### Spring Boot + Vue 实现图片上传功能 #### 后端部分 (Spring Boot) 在 Spring Boot 中，可以通过 `@RestController` 和 `MultipartFile` 来处理文件上传请求。以下是实现图片上传的核心代码： ```java import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.IOException; @RestController @RequestMapping("/api/upload") public class FileUploadController { private static final String UPLOAD_DIR = System.getProperty("user.dir") + "/uploads/"; @PostMapping("/") public String uploadFile(@RequestParam("file") MultipartFile file) { if (file.isEmpty()) { return "失败：未选择任何文件"; } try { // 创建目标目录 File dir = new File(UPLOAD_DIR); if (!dir.exists()) { dir.mkdirs(); } // 将文件保存到服务器 byte[] bytes = file.getBytes(); File serverFile = new File(dir.getAbsolutePath() + File.separator + file.getOriginalFilename()); org.apache.commons.io.FileUtils.writeByteArrayToFile(serverFile, bytes); return "成功：" + file.getOriginalFilename() + " 已上传至服务器"; } catch (IOException e) { e.printStackTrace(); return "失败：无法完成文件上传操作"; } } } ``` 上述代码实现了基本的文件接收逻辑，并将接收到的文件存储到指定路径下[^1]。 --- #### 前端部分 (Vue.js) 在 Vue.js 中，可以借助 `<input type="file">` 或者第三方组件库（如 Element UI）来构建文件上传界面。以下是一个基于原生 HTML 的简单示例： ```html <template> <div> <h3>图片上传</h3> <form enctype="multipart/form-data" novalidate> <input type="file" name="file" id="file" ref="fileInput" v-on:change="handleFileChange"> <button type="button" v-on:click="uploadImage()">上传</button> </form> </div> </template> <script> export default { data() { return { selectedFile: null, }; }, methods: { handleFileChange(event) { this.selectedFile = event.target.files[0]; }, async uploadImage() { const formData = new FormData(); formData.append('file', this.selectedFile); await fetch('http://localhost:8080/api/upload/', { method: 'POST', body: formData, }) .then(response => response.text()) .then(result => alert(result)) .catch(error => console.error('Error:', error)); }, }, }; </script> ``` 此代码片段展示了如何通过 Vue 绑定事件监听器捕获用户选择的文件并将其发送到后端服务。 如果希望进一步优化用户体验，还可以引入 Element UI 提供的更高级别的表单控件[^2]。 --- #### 完整流程说明 整个过程分为以下几个方面： - **前端交互**：允许用户选择本地磁盘上的图像资源并通过 HTTP 请求提交数据包。 - **网络传输**：利用标准协议 POST 方法携带二进制流到达远程 Web API 接口。 - **后台解析与持久化**：由框架自动封装好的工具类读取输入流中的具体内容进而写入物理位置或者数据库记录中去[^3]。 ---