Spring Boot中保存前端上传的图片实现步骤详解

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

spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB
#====自定义变量======
#文件上传地址
file.upload.dir=uploads/

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());
        }
    }
}

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);
    }
}

<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>

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