当前位置: 代码网 > it编程>编程语言>Java > SpringBoot3实现上传图片并返回路径让前端显示图片

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

2025年01月01日 Java 我要评论
springboot 3 上传图片,并返回路径让前端显示图片步骤:1.利用springboot写一个图片上传接口2.接收前端传递过来的图片并保存到本地指定位置。3.前端(浏览器)可以通过url访问上传

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上传图片并返回路径内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com