在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
#====自定義變量======
#文件上傳地址
file.upload.dir=uploads/

3. 創建文件上傳控制器

package com.hirain.mall.controller;import com.hirain.mall.common.ApiRestResponse;
import jakarta.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.Map;
import java.util.UUID;@RestController
@RequestMapping("/images")
public class ImageController {@Value("${file.upload.dir}") // 從配置文件中讀取路徑private String uploadDir;@PostMapping("/upload")public ApiRestResponse<?> uploadImage(@RequestParam("image") MultipartFile file,HttpServletRequest request) {try {// 創建目錄 (如果不存在)Path uploadPath = Paths.get(uploadDir);if (!Files.exists(uploadPath)) {Files.createDirectories(uploadPath);}// 生成唯一文件名 (避免覆蓋)String originalFileName = file.getOriginalFilename();String fileExt = originalFileName.substring(originalFileName.lastIndexOf("."));String newFileName = UUID.randomUUID() + fileExt;// 保存文件Path targetPath = uploadPath.resolve(newFileName);Files.copy(file.getInputStream(), targetPath);// 生成訪問 URL (使用環境信息構建完整URL)String baseUrl = request.getRequestURL().toString().replace(request.getRequestURI(), "");String imageUrl = baseUrl + "/images/" + newFileName;return ApiRestResponse.success(Map.of("filename", newFileName,"url", imageUrl//完成靜態資源映射配置后，通過瀏覽器直接訪問該地址即可訪問圖片));} catch (Exception e) {return ApiRestResponse.error(500,"上傳失敗: " + e.getMessage());}}
}

4.靜態資源映射配置類WebConfig

package com.hirain.mall.config;import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;import java.io.File;@Configuration
public class WebConfig implements WebMvcConfigurer {@Value("${file.upload.dir}")private String uploadDir;@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {// 將真實的上傳目錄映射為虛擬路徑registry.addResourceHandler("/images/**").addResourceLocations("file:" + uploadDir + File.separator);}
}

5. 前端調用示例（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/images/upload', {method: 'POST',body: formData});const result = await response.text();console.log(result);
}
</script>

6. postman調用示例

關鍵點說明：

1. 文件保存路徑：

   • 示例中使用相對路徑uploads/（項目根目錄下）
   • 生產環境建議使用絕對路徑（如/var/www/uploads/）

2. 文件名處理：

   • 使用時間戳前綴確保唯一性
   • 保留原始文件名后綴（通過file.getOriginalFilename()獲取）

3. 異常處理：

   • 捕獲IOException處理文件操作異常
   • 返回錯誤信息給前端

進階優化建議：

1. 添加文件類型校驗：

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

2. 添加安全限制：

   • 限制文件擴展名（jpg, png等）
   • 使用病毒掃描工具掃描上傳文件

3. 云存儲方案：

   • 生產環境建議使用云存儲（AWS S3, 阿里云OSS等）
   • 示例代碼替換為云存儲SDK的上傳邏輯

處理流程示意圖：

其中，前端上傳圖片后，后端保存在本地的流程如下：

前端 → 發送Multipart請求 → Spring控制器 → 驗證文件 → 生成唯一文件名 → 保存到本地 → 返回結果

根據實際需求選擇本地存儲或云存儲方案，并注意做好文件類型校驗和安全防護措施。