springboot vue上传文件

### Spring Boot 和 Vue 文件上传实现教程 #### 后端部分 (Spring Boot) 在 Spring Boot 中，可以通过 `MultipartFile` 来处理文件上传请求。以下是基于引用中的简化版示例[^1]。 ```java import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.IOException; @RestController @RequestMapping("/upload") public class FileUploadController { @PostMapping("/") public String uploadFile(@RequestParam("file") MultipartFile file) { if (file.isEmpty()) { return "上传失败，因为文件为空"; } try { // 获取原始文件名 String fileName = file.getOriginalFilename(); // 定义保存路径 String filePath = "/path/to/save/" + fileName; // 替换为实际存储路径 File dest = new File(filePath); // 将文件写入目标位置 file.transferTo(dest); return "上传成功：" + fileName; } catch (IOException e) { e.printStackTrace(); return "上传失败：" + e.getMessage(); } } } ``` 上述代码实现了基本的文件接收逻辑，并将其保存到指定目录中。需要注意的是，在生产环境中应加入更多的校验机制，例如文件大小限制、类型验证等[^2]。 --- #### 前端部分 (Vue.js) 前端通过表单提交文件数据至后端接口。以下是一个简单的 Vue 组件示例： ```vue <template> <div> <h3>文件上传</h3> <input type="file" @change="handleFileChange" /> <button @click="submitFile">上传</button> </div> </template> <script> export default { data() { return { selectedFile: null, }; }, methods: { handleFileChange(event) { this.selectedFile = event.target.files[0]; }, async submitFile() { const formData = new FormData(); formData.append("file", this.selectedFile); // 添加文件到FormData对象 try { const response = await fetch("http://localhost:8080/upload/", { // 调整URL为目标服务器地址 method: "POST", body: formData, // 发送文件数据 }); if (response.ok) { alert("文件上传成功！"); } else { alert("文件上传失败，请重试"); } } catch (error) { console.error(error); alert("网络错误，请稍后再试"); } }, }, }; </script> ``` 此组件允许用户选择本地文件并通过 HTTP POST 请求发送给后端服务。注意调整 URL 地址以匹配部署环境下的 API 接口。 --- #### 额外注意事项 为了增强系统的健壮性和用户体验，建议增加如下功能： - **文件大小限制**：可以在前端和后端分别设置最大可接受的文件尺寸。 - **进度条显示**：对于大文件传输场景，提供实时进度反馈会显著改善交互体验。 - **安全性措施**：防止恶意脚本注入等问题发生，需严格过滤输入内容并定期扫描存储区域内的潜在威胁。 以上即为完整的 Spring Boot 结合 Vue 进行文件上传的功能开发流程说明。 ---