若依框架中的上传图片后如何实现回显到页面的

在日常开发中,总会遇到上传文件、图片等功能,然后本地开发的话,又没有像OSS、七牛等网络存储,这个时候通常将文件上传到本地,那么上传之后拿到的是本地的路径,存储到数据库中,查询的时候如何将本地的图片进行一个回显到页面上,最初想的

-可以通过base64的方式,查询数据的时候直接将本地图片转换成base64返回然后显示到页面中

-也可以通过在数据库中存储图片名称,然后通过后端一个接口专门接受图片名称,返回图片流或者base64

虽然也能通过上述说的方式解决这儿问题,但总觉得不太方便和友好,那如何在本地开发的时候能更优雅的解决上传文件回显这些问题呢?

最近在使用若依框架时,突然想看看若依是怎么解决这个上传和回显问题的, 接下来就跟我一起去研究一下吧!

若依框架中的上传

首先下载下来的若依框架除了上传头像外,没有其他的上传功能,但是在前端的代码中有封装好的上传图片和上传文件的组件。所以这里暂时就以上传头像做为切入点 !封装好的上传文件和图片咱们放到最后再说,原理基本一致!

点击上传图片之后,请求的接口是:http://localhost/dev-api/system/user/profile/avatar, 然后上传成功后返回了一个/profile/avatar/2024/12/24/a54fead71fadeea5edb27e5031a694ec_20241224111039A001.jpg文件路径, 这个路径会被存储到数据库中,后续回显都会基于这个路径来

然后点击上传头像之后,发现他请求了一个 http://localhost/dev-api/profile/avatar/2024/12/23/880f56db47946db499fc02d311aa4335_20241223173013A001.jpg 的地址, 这里就是图片上传成功之后能回显的关键所在!

  1. 首先请求这个接口是哪里的?
  2. 其次这个接口是如何拿到存储在本地的图片信息的?

ResourceHandlerRegistry是Spring MVC框架中的一个类,用于注册和管理静态资源处理器(ResourceHandler)。它提供了一系列方法用于配置和操作静态资源。

可以发现在ResourceHandlerRegistry中注册了一个静态资源处理器和配置了静态资源的位置, 这个方法会把/profile开头的路径给替换掉 RuoYiConfig.getProfile() 会获取到 最初的文件根路径D:/ruoyi/uploadPath 会自动转向到 RuoYiConfig.getProfile() 目录下寻找对应的资源文件,也就找到了请求文件最后返回file:D:/ruoyi/uploadPath/avatar/2024/12/23/880f56db47946db499fc02d311aa4335_20241223173013A001.jpg文件流。

然后对照上述的接口发现,哦,原来是通过这里进行的一个接口映射到本地静态资源的呀!

真是一个好的思路呢!到这里图片回显的问题就清晰了!接下来是贴一下若依的上传下载的代码!

前端代码:

前端这里提供了上传文件、上传图片、预览图片的组件,若依已经封装好了,并且也已经进行了全局的声明,可以直接使用,使用的时候别忘记指定绑定的值即可。

复制代码
<image-upload v-model="form.${field}"/>
<file-upload v-model="form.${field}"/>
<image-preview :src="scope.row.${javaField}" :width="50" :height="50"/>

然后上传调用的是后端的common/upload接口

后端代码:

java 复制代码
// 上传并返回新文件名称
String fileName = FileUploadUtils.upload(filePath, file);

这里代码将文件上传并生成一个新的路径: /profile/avatar/2024/12/24/a54fead71fadeea5edb27e5031a694ec_20241224111039A001.jpg

然后数据库中存储的就是该路径,回显的时候该路径会通过上面的静态资源处理器转换成对应的本地路径对应的文件流!

至此, 若依的上传文件及回显功能,算是彻底搞明白了!的确是一个很好的思路。学习到了!

相关推荐
DCTANT16 分钟前
【原创】国产化适配-全量迁移MySQL数据到OpenGauss数据库
java·数据库·spring boot·mysql·opengauss
Touper.25 分钟前
SpringBoot -- 自动配置原理
java·spring boot·后端
黄雪超34 分钟前
JVM——函数式语法糖:如何使用Function、Stream来编写函数式程序?
java·开发语言·jvm
ThetaarSofVenice41 分钟前
对象的finalization机制Test
java·开发语言·jvm
望获linux2 小时前
【实时Linux实战系列】CPU 隔离与屏蔽技术
java·linux·运维·服务器·操作系统·开源软件·嵌入式软件
JosieBook2 小时前
【Java编程动手学】使用IDEA创建第一个HelloJava程序
java·开发语言·intellij-idea
Thomas_YXQ2 小时前
Unity3D DOTS场景流式加载技术
java·开发语言·unity
summer夏1232 小时前
2025.07 做什么
java·android studio
钢铁男儿3 小时前
C# 委托(调用带引用参数的委托)
java·mysql·c#
Apex Predator3 小时前
windows安装maven环境
java·maven