解决spring boot+vue后端接收本地文件后，前端无法回显问题

本文链接：https://blog.csdn.net/m0_55746729/article/details/131525648

文章讲述了由于浏览器的安全策略阻止从本地文件系统加载资源的问题，提供了一个解决方案，即通过配置虚拟路径映射到本地路径来解决。在SpringBoot应用中，通过application.yml设置上传文件路径，然后在Interceptor配置WebMvcConfigurer添加资源处理器，实现对上传图片的映射。Controller部分展示了如何处理文件上传，包括文件保存和返回唯一文件名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
出现这个问题是由于浏览器的安全策略所引起的。它阻止了从本地文件系统加载资源，以防止潜在的安全风险。

下面提供了一种配置虚拟路径映射本地路径的方式解决该问题

首先通过application.yml文件配置一下上传文件保存的路径，也可以使用其他方式配置上传文件保存的路径
application.yml

prop:
  upload-folder: D:/test/

拦截器

@Configuration
public class InterceptorConfig implements WebMvcConfigurer {
    @Value("${prop.upload-folder}")
    private String UPLOAD_FOLDER;

   /*
     *addResourceHandler:访问映射路径
     *addResourceLocations:资源绝对路径
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/image/**").addResourceLocations("file:///" + UPLOAD_FOLDER);
    }
}

controller

@RestController
@RequestMapping("api/v1/pri")
public class Controller {
    @Value("${prop.upload-folder}")
    private String UPLOAD_FOLDER;

    @PostMapping("uploadImg")
    public JsonData uploadImg1(MultipartFile file){
        String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1, file.getOriginalFilename().length());
        String savePath = UPLOAD_FOLDER;
        File savePathFile = new File(savePath);
        if (!savePathFile.exists()) {
            //若不存在该目录，则创建目录
            savePathFile.mkdir();
        }
        //通过UUID生成唯一文件名
        String filename = UUID.randomUUID().toString().replaceAll("-","") + "." + suffix;
        try {
            //将文件保存指定目录
            file.transferTo(new File(savePath + filename));
        } catch (Exception e) {
            e.printStackTrace();
        }
        //返回文件名称
        System.out.println(filename);
        return JsonData.buildSuccess(filename);
    }
}