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
#====自定义变量======
#文件上传地址
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;
@Override
public
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控制器 → 验证文件 → 生成唯一文件名 → 保存到本地 → 返回结果

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