Spring Boot项目中上传图片后如何实现即时显示？

核心原因 #

你把文件存在src/main/resources/static目录下，这个目录属于源码资源目录：

• 开发阶段，Spring Boot会把该目录的文件复制到target/classes/static，但默认不会实时监控新增文件，所以必须重启才会加载
• 生产环境下，这个目录会被打包进jar包，根本无法写入新文件

解决步骤 #

1. 修改存储位置到外部目录 #

把文件存储到项目根目录下的独立文件夹，比如uploaded-images/services，不要和源码目录混在一起。

修改StorageProperties：

@ConfigurationProperties("storage")
public class StorageProperties {
    // 改成项目根目录下的外部文件夹
    private String location = "uploaded-images/services";

    // 补充get方法，Spring Boot绑定配置需要
    public String getLocation() {
        return location;
    }

    public void setLocation(String location) {
        this.location = location;
    }
}

2. 配置Spring Boot资源映射 #

添加配置类，让Spring Boot把外部目录的文件映射成可访问的URL路径：

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Autowired
    private StorageProperties storageProperties;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 映射URL路径 /uploaded/** 到实际存储目录
        registry.addResourceHandler("/uploaded/**")
                .addResourceLocations("file:" + storageProperties.getLocation() + "/");
    }
}

注意：file:前缀必须加，代表访问本地文件系统路径，而非类路径资源

3. 修改前端访问路径 #

把Thymeleaf里的图片src路径改成映射后的URL：

<div class="works" id="works" th:each="applications: ${applications}">
    <div class="works__item">
        <!-- 替换原有路径为映射后的/uploaded/ -->
        <img class="works__photo" th:src="@{/uploaded/{image}(image=${applications.imageName})}" alt="">
        <form th:action="@{/admin/evcharging}" th:method="get">
            <div class="works__content">
                <div class="works__title" th:text="${applications.applicationName}"></div>
                <div class="works__text" th:text="${applications.applicationType}"></div>
                <button class="btn btn--red btn--long">Learn more</button>
            </div>
        </form>
    </div>
</div>

4. 确保存储服务使用新路径 #

检查文件上传服务代码，确保它基于StorageProperties的location属性保存文件，比如官方教程里的FileSystemStorageService：

@Service
public class FileSystemStorageService implements StorageService {

    private final Path rootLocation;

    @Autowired
    public FileSystemStorageService(StorageProperties properties) {
        this.rootLocation = Paths.get(properties.getLocation());
    }

    // 上传、加载文件的方法保持不变，确保基于rootLocation操作
}

验证 #

1. 启动项目，上传图片，文件会出现在项目根目录的uploaded-images/services下
2. 返回页面后，图片可直接加载，无需重启项目

额外提示 #

• 如果用IntelliJ，uploaded-images目录可能不会自动显示，右键项目→Refresh即可
• 生产环境部署时，建议把存储路径配置到服务器外部稳定目录（比如/data/uploaded/services），避免项目更新丢失文件，可通过application.yml配置：

storage:
  location: /data/uploaded/services

内容的提问来源于stack exchange，提问作者Syed