Spring Boot上传图片到resources目录后Vue.js前端无法显示问题求助

问题核心原因 #

1. 运行时写入src/main/resources目录的文件不会被Spring Boot加载：Spring Boot启动时只会读取编译后target/classes下的静态资源，运行时写入src目录的文件不会同步到运行时类路径，且打包为jar包后jar包本身是只读的，无法写入文件。
2. 静态资源映射规则和访问路径不匹配：你配置的是/resources/**的映射规则，但前端访问的是/images/xxx路径，不会匹配到你配置的规则，自然返回404。

可行解决方案（生产环境可用） #

1. 调整文件存储路径

不要将上传的文件存放在项目resources目录，改为使用服务器独立的外部存储目录，比如Windows下D:/upload/images、Linux下/opt/upload/images，避免类路径资源加载限制。

可以在application.yml/application.properties中配置上传路径，方便后续修改：

upload:
  path: D:/upload/images  # 按需替换为你的实际存储路径

2. 修改静态资源映射配置

调整资源映射规则，匹配前端访问路径，同时关联外部存储目录和原有静态资源目录：

@Configuration
public class WebConfig implements WebMvcConfigurer {      
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/images/**") // 匹配前端/images开头的请求
                .addResourceLocations("file:" + System.getProperty("upload.path") + "/", "classpath:/static/images/")
                .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
    }
}

注意file:前缀是Spring读取外部文件目录的固定写法，不能省略。

3. 优化上传代码

注入配置的上传路径，同时优化文件后缀提取逻辑，避免文件名带多个点时报错：

@Value("${upload.path}")
private String uploadPath;

public String uploadImage(String Parameter, MultipartFile sourceFile, Integer VID) throws IOException{
    byte[] bytes = sourceFile.getBytes();
    String originalFilename = sourceFile.getOriginalFilename();
    // 提取文件后缀，兼容带多个点的文件名
    String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
    // 拼接最终存储路径
    String fileLocation = uploadPath + File.separator + VID + suffix;
    Path path = Paths.get(fileLocation);
    Files.write(path, bytes);
    // 直接返回前端可访问的路径，后续存在数据库即可实现动态加载
    return "/images/" + VID + suffix;
}

前端适配 #

固定路径测试直接使用原有代码即可：

<CImg src="/images/141.png" shape="rounded"></CImg>

动态加载时，只需要从后端接口拿到返回的图片路径，赋值给src属性即可正常渲染。

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