JavaScript配合Spring实现文件上传需前后端协同，前端用FormData通过fetch发送文件，后端用@RequestParam接收并保存，配置文件大小限制确保安全。
JavaScript 本身无法直接实现 Spring 文件上传的全部逻辑，因为文件上传涉及前端（JavaScript）和后端（Spring Boot / Spring MVC）协同工作。JavaScript 负责在浏览器中选择文件并发送请求，Spring 负责接收、解析和保存文件。以下是完整的操作步骤，帮助你用 JS 配合 Spring 实现文件上传功能。
1. 前端：使用 JavaScript 构建文件上传请求
在 HTML 页面中添加文件输入框和上传按钮：
HTML 结构：
<input type="file" id="fileInput" /> <button onclick="uploadFile()">上传文件</button>
JavaScript 使用 FormData 发送文件：
立即学习“Java免费学习笔记（深入）”；
获取文件并使用 fetch 或 XMLHttpRequest 提交到 Spring 后端：
function uploadFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (!file) {
alert("请选择文件");
return;
}
const formData = new FormData();
formData.append("file", file);
fetch('/api/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
alert("上传成功: " + data.filename);
})
.catch(error => {
alert("上传失败: " + error.message);
});
}
2. 后端：Spring Boot 接收文件
确保 Spring Boot 项目已启用文件上传支持（默认开启），然后编写控制器处理上传请求。
添加依赖（Maven 示例）：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
Controller 示例：
@RestController
public class FileUploadController {
private final String UPLOAD_DIR = "uploads/";
@PostMapping("/api/upload")
public ResponseEntity<Map<String, String>> handleFileUpload(@RequestParam("file") MultipartFile file) {
Map<String, String> response = new HashMap<>();
try {
// 确保上传目录存在
Path uploadPath = Paths.get(UPLOAD_DIR);
if (!Files.exists(uploadPath)) {
Files.createDirectories(uploadPath);
}
// 保存文件
String filename = System.currentTimeMillis() + "_" + file.getOriginalFilename();
Path filePath = uploadPath.resolve(filename);
Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);
response.put("filename", filename);
response.put("message", "文件上传成功");
return ResponseEntity.ok(response);
} catch (IOException e) {
response.put("error", "上传失败: " + e.getMessage());
return ResponseEntity.status(500).body(response);
}
}
}
3. 配置 Spring 文件上传限制（可选）
在 application.yml 中配置文件大小限制：
spring:
servlet:
multipart:
max-file-size: 10MB
max-request-size: 10MB
这可以防止用户上传过大的文件导致服务器问题。
4. 测试与部署
- 启动 Spring Boot 应用，默认监听 8080 端口
- 访问前端页面，选择文件并点击“上传”
- 检查后台是否生成文件，以及返回结果是否正确
- 查看
uploads/目录确认文件已保存
基本上就这些。只要前后端接口匹配，JavaScript 能顺利把文件传给 Spring，Spring 就能完成接收和存储。关键点是使用 FormData 和 @RequestParam("file") 对应字段名，避免参数不匹配错误。
