SpringBoot3实现上传图片并返回路径让前端显示图片

 更新时间:2024年12月31日 10:14:39   作者:Harry技术  
这篇文章主要介绍了SpringBoot3实现上传图片并返回路径让前端显示图片,文中通过图文和代码讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下

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

步骤:

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

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

3.前端(浏览器)可以通过url访问上传过的图片

创建项目:

pom.xml 主要依赖

<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 配置一个图片上传地址,方便后续更改路径

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

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

/**
 * @author harry
 * @公众号 Harry技术
 */
@RestController
@RequestMapping("/upload")
public class 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 (!path.exists()) {
                // 创建完整的目录
                path.mkdirs();
            }
            // 获取文件原始名(包含后缀名)
            String originalName = file.getOriginalFilename();
            // 获取文件名(不包括后缀)
            String prefixName = originalName.substring(0, originalName.lastIndexOf("."));
            // 获取文件后缀 (包括.) 例如:.png
            String suffixName = originalName.substring(originalName.lastIndexOf("."));
            // 这是处理后的新文件名
            String fileName;
            if (originalName.contains(".")) {
                // 示例:avatar.123.png,经过处理后得到:avatar.123_1661136943533.png
                fileName = prefixName + "_" + System.currentTimeMillis() + suffixName;
            } else {
                return "上传图片格式错误,请重新选择!";
            }

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

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

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

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

/**
 * @author harry
 * @公众号 Harry技术
 */
@Configuration
public class 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/**")
                //此处为设置服务端存储图片的路径(前端上传到后台的图片保存位置)
                .addResourceLocations("file:/" + uploadPath);
    }
}

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

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

到此这篇关于SpringBoot3实现上传图片并返回路径让前端显示图片的文章就介绍到这了,更多相关SpringBoot3上传图片并返回路径内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Java单机环境实现定时任务技术

    Java单机环境实现定时任务技术

    这篇文章主要介绍了Java单机环境实现定时任务技术,文章内容介绍详细,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-04-04
  • Java四种遍历Map的方法

    Java四种遍历Map的方法

    今天小编就为大家分享一篇关于Java四种遍历Map的方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Springmvc处理ajax请求并返回json数据

    Springmvc处理ajax请求并返回json数据

    这篇文章主要介绍了Springmvc处理ajax请求并返回json数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 用SpringBoot Admin监控SpringBoot程序

    用SpringBoot Admin监控SpringBoot程序

    这篇文章主要介绍了用SpringBoot Admin监控SpringBoot程序,帮助大家更好的理解和使用springboot框架,感兴趣的朋友可以了解下
    2020-10-10
  • nacos使用外部数据库部署到k8s实践

    nacos使用外部数据库部署到k8s实践

    Nacos 是一个用于发现、配置和管理微服务的平台,提供了一系列简单易用的特性,帮助快速实现动态服务发现、服务配置、服务元数据及流量管理,通过简单的安装和部署,可以快速构建、交付和管理微服务平台
    2026-02-02
  • POI对Excel自定义日期格式的读取(实例代码)

    POI对Excel自定义日期格式的读取(实例代码)

    下面小编就为大家带来一篇POI对Excel自定义日期格式的读取(实例代码)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • springboot访问请求404的原因及解决办法

    springboot访问请求404的原因及解决办法

    在使用Spring Boot开发应用程序时,有时可能会遇到访问请求出现404错误的情况,即请求的资源未找到,这篇文章主要给大家介绍了关于springboot访问请求404的原因及解决办法,需要的朋友可以参考下
    2023-09-09
  • SpringBoot整合WebSocket实现聊天室流程全解

    SpringBoot整合WebSocket实现聊天室流程全解

    WebSocket协议是基于TCP的一种新的网络协议。本文将通过SpringBoot集成WebSocket实现简易聊天室,对大家的学习或者工作具有一定的参考学习价值,感兴趣的可以了解一下
    2023-01-01
  • SpringBoot构建Restful service完成Get和Post请求

    SpringBoot构建Restful service完成Get和Post请求

    这篇文章主要介绍了SpringBoot构建Restful service完成Get和Post请求的示例代码,感兴趣的朋友一起看看吧
    2017-08-08
  • MyBatis 配置之集合的嵌套方式

    MyBatis 配置之集合的嵌套方式

    这篇文章主要介绍了MyBatis 配置之集合的嵌套方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-09-09

最新评论