前端使用后端的MultipartFile上传图片

### 实现前端调用Spring Boot `MultipartFile`接口上传图片 #### 前端HTML页面设置 为了能够发送文件给服务器，在HTML表单中需要指定属性`enctype="multipart/form-data"`，这告诉浏览器以二进制流的方式编码数据[^1]。 ```html <form id="uploadForm"> <input type="file" name="file" /> <button type="submit">Upload</button> </form> <div id="response"></div> ``` #### JavaScript (AJAX) 发送请求 使用JavaScript可以更灵活地控制上传过程并处理响应。这里采用XMLHttpRequest对象来构建POST请求，并将FormData作为payload传递给后端API[^3]。 ```javascript document.getElementById('uploadForm').addEventListener('submit', function(event){ event.preventDefault(); var fileInput = document.querySelector('[name=file]'); var formData = new FormData(); formData.append("file", fileInput.files[0]); var xhr = new XMLHttpRequest(); xhr.open("POST", "/api/upload"); xhr.onload = function () { if (xhr.status === 200) { document.getElementById('response').innerHTML = "File uploaded successfully!"; } else { document.getElementById('response').innerHTML = "Error uploading file."; } }; xhr.send(formData); }); ``` #### Spring Boot 后端控制器接收文件 在Spring Boot应用程序里定义一个接受`@RequestParam`参数的方法用于捕获来自客户端提交的数据包中的文件部分。此方法内部会利用`MultipartFile`类实例化传入的对象以便于后续的操作比如保存至本地磁盘或是其他任何形式的持久化存储[^4]。 ```java @RestController @RequestMapping("/api") public class FileController { @PostMapping("/upload") public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) throws IOException { String originalFilename = file.getOriginalFilename(); // 获取原始文件名称 try{ byte[] bytes = file.getBytes(); Path path = Paths.get("./uploads/" + originalFilename); // 设置保存路径 Files.write(path, bytes); return ResponseEntity.ok("File has been uploaded."); }catch(Exception e){ return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(e.getMessage()); } } } ```