Springboot 上传图片，并返回路径让前端显示图片

Springboot 上传图片，并返回路径让前端显示图片

步骤：

1.利用SpringBoot写一个图片上传接口

2.接收前端传递过来的图片并保存到本地指定位置。

.前端（浏览器）可以通过url访问上传过的图片

创建项目：

pom.xml主要依赖

代码语言：javascript代码运行次数：0运行复制

<properties>
    <java.version>17</java.version>
</properties>
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>

application.yml 配置一个图片上传地址,方便后续更改路径

代码语言：javascript代码运行次数：0运行复制

upload:
  # 图片保存路径
  path: E:\img

写一个FileController用来接收前端提交的图片文件，并把图片保存到服务器的指定位置

代码语言：javascript代码运行次数：0运行复制

/**
 * @author harry
 * @ Harry技术
 */
@RestController
@RequestMapping("/upload")
publicclass FileController {

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


    @PostMapping
    public String uploadFile(@RequestParam("file") MultipartFile file) {
        try {

            if (file.isEmpty()) {
                return"文件为空,请重新选择!";
            }
            // 上传的图片
            File path = new File(uploadPath);
            if (!()) {
                // 创建完整的目录
                ();
            }
            // 获取文件原始名(包含后缀名)
            String originalame = file.getOriginalFilename();
            // 获取文件名（不包括后缀）
            String prefixame = originalame.substring(0, originalame.lastIndexOf("."));
            // 获取文件后缀 （包括.） 例如：.png
            String suffixame = originalame.substring(originalame.lastIndexOf("."));
            // 这是处理后的新文件名
            String fileame;
            if ((".")) {
                // 示例：avatar.12.png，经过处理后得到：avatar.12_166116945.png
                fileame = prefixame + "_" + () + suffixame;
            } else {
                return"上传图片格式错误,请重新选择！";
            }

            String savePath = path.getPath() + File.separator + fileame;

            File saveFile = new File(savePath);
            // 将上传的文件复制到指定目录
            (file.getBytes(), saveFile);
            // 返回给前端的图片保存路径；前台可以根据返回的路径拼接完整地址，即可在浏览器上预览该图片
            String dest = "images" + File.separator + fileame;

            if (("\\")) {
                dest = dest.replace("\\", "/");
            }
            return dest;
        } catch (IOException e) {
            return e.getMessage();
        }
    }
}

配置WebMvcConfigurer，在其addResourceHandlers方法中设置资源映射

代码语言：javascript代码运行次数：0运行复制

/**
 * @author harry
 * @ Harry技术
 */
@Configuration
publicclass InterceptorConfig implements WebMvcConfigurer {

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

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // images 是访问图片资源的前缀，比如要访问test1.png
        // 则全路径为：http://localhost:端口号/images/test1.png
        registry.addResourceHandler("/images/**")
                //此处为设置服务端存储图片的路径（前端上传到后台的图片保存位置）
                .addResourceLocati("file:/" + uploadPath);
    }
}

编写前端进行测试，这里采用Apifox模拟图片上传，并在浏览器中访问打开

有的小伙伴在测试的时候，可能会出现打不开的情况，那你检查一下本地路径地址，不要有中文目录！！！

本文参与 腾讯云自媒体同步曝光计划，分享自。原始发表：2024-12-29，如有侵权请联系 cloudcommunity@tencent 删除上传图片图片上传浏览器配置前端