首先通过HTML5表单或Fetch API实现前端文件上传，再由Spring Boot后端接收处理。具体步骤为：1. 使用enctype="multipart/form-data"的form表单提交文件至/api/upload接口；2. 或通过JavaScript创建FormData对象并用fetch()发送POST请求；3. Spring Boot中定义@PostMapping方法，利用@RequestParam("file") MultipartFile接收文件，配置最大文件大小限制，并实现文件保存逻辑，返回上传结果。
如果您需要在HTML5文件中实现与后端Java服务进行数据交互，特别是上传文件到Spring Boot接口，可以通过标准的表单提交或使用JavaScript的Fetch API来完成。以下是具体的实现方式：
一、创建HTML5文件上传表单
使用HTML5提供的表单元素可以轻松构建文件上传界面。该方法适用于不需要复杂前端逻辑的场景，通过form标签直接向Spring Boot后端发送multipart/form-data请求。
1、编写一个包含文件输入和提交按钮的HTML表单，设置正确的enctype类型以支持文件上传。
2、确保form的action属性指向Spring Boot后端暴露的文件上传接口路径，例如 /api/upload。
立即学习“Java免费学习笔记（深入）”；
3、method属性应设为POST，因为文件上传通常使用POST请求。
示例代码如下：
<form action="/api/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
<button type="submit">上传文件</button>
</form>
二、使用JavaScript Fetch API上传文件
利用现代浏览器提供的Fetch API可以在不刷新页面的情况下异步上传文件，提供更好的用户体验。此方法适合需要动态控制上传过程或显示进度的应用。
1、在HTML中添加文件输入控件，并绑定一个change事件或按钮点击事件。
2、当用户选择文件后，获取FileList对象中的文件并构造FormData对象。
3、使用fetch()函数发送POST请求，将FormData作为body内容发送至Spring Boot接口。
示例代码如下：
const fileInput = document.getElementById('file');
const formData = new FormData();
formData.append('file', fileInput.files[0]);
fetch('/api/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data));
三、配置Spring Boot接收文件上传
为了使后端能够正确处理来自HTML5前端的文件上传请求，需在Spring Boot应用中定义相应的控制器方法，并启用Multipart解析功能。
1、添加@Controller或@RestController注解类，并定义一个@PostMapping方法用于处理文件上传。
2、使用@RequestParam("file") MultipartFile file参数接收前端传递的文件数据。
3、确保application.properties中配置了最大文件大小限制，例如：
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB
4、编写处理逻辑，如保存文件到本地或存储系统，并返回响应结果。
示例代码如下：
@PostMapping("/api/upload")
public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return ResponseEntity.badRequest().body("文件为空");
}
try {
byte[] bytes = file.getBytes();
// 保存文件逻辑
Files.write(Paths.get("uploads/" + file.getOriginalFilename()), bytes);
return ResponseEntity.ok("文件上传成功");
} catch (IOException e) {
return ResponseEntity.status(500).body("上传失败");
}
}
