Spring Boot中保存前端上传的图片

在Spring Boot中保存前端上传的图片可以通过以下步骤实现：

1. 添加依赖

确保在pom.xml中已包含Spring Web依赖：

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>
</dependency>

2. 配置文件上传限制

在application.properties中设置文件大小限制：

spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

3. 创建文件上传控制器

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.nio.file.*;@RestController
@RequestMapping("/api/images")
public class ImageController {// 指定保存目录（示例路径，可根据需求修改）private static final String UPLOAD_DIR = "uploads/";@PostMapping("/upload")public String uploadImage(@RequestParam("image") MultipartFile file) {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);return "文件上传成功: " + fileName;} catch (IOException e) {e.printStackTrace();return "文件上传失败: " + e.getMessage();}}
}

4. 前端调用示例（HTML）

<input type="file" id="imageInput">
<button onclick="uploadImage()">上传</button><script>
async function uploadImage() {const fileInput = document.getElementById('imageInput');const formData = new FormData();formData.append('image', fileInput.files[0]);const response = await fetch('http://localhost:8080/api/images/upload', {method: 'POST',body: formData});const result = await response.text();console.log(result);
}
</script>

关键点说明：

1. 文件保存路径：

   • 示例中使用相对路径uploads/（项目根目录下）
   • 生产环境建议使用绝对路径（如/var/www/uploads/）

2. 文件名处理：

   • 使用时间戳前缀确保唯一性
   • 保留原始文件名后缀（通过file.getOriginalFilename()获取）

3. 异常处理：

   • 捕获IOException处理文件操作异常
   • 返回错误信息给前端

进阶优化建议：

1. 返回文件访问URL：

   // 在Controller中返回完整访问路径
   String fileUrl = "http://your-domain.com/images/" + fileName;
   return Map.of("url", fileUrl);
   

2. 添加文件类型校验：

   if (!file.getContentType().startsWith("image/")) {return "仅支持图片文件";
   }
   

3. 使用配置化路径：

   # application.properties
   app.upload.dir=/var/www/uploads/
   

   @Value("${app.upload.dir}")
   private String uploadDir;
   

4. 添加安全限制：

   • 限制文件扩展名（jpg, png等）
   • 使用病毒扫描工具扫描上传文件

5. 云存储方案：

   • 生产环境建议使用云存储（AWS S3, 阿里云OSS等）
   • 示例代码替换为云存储SDK的上传逻辑

处理流程示意图：

前端 → 发送Multipart请求 → Spring控制器 → 验证文件 → 生成唯一文件名 → 保存到本地 → 返回结果

根据实际需求选择本地存储或云存储方案，并注意做好文件类型校验和安全防护措施。