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

在日常开发中,总会遇到上传文件、图片等功能,然后本地开发的话,又没有像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. 其次这个接口是如何拿到存储在本地的图片信息的?
  • 首先可以在前端项目中的.env.development文件中看到关于dev环境的配置
    在这里插入图片描述
  • 然后在vue.config.js中看到,将localhost/dev-api/映射成了 localhost:8080
    在这里插入图片描述
  • 所以回到问题1, 请求的http://localhost/dev-api/profile/avatar/2024/12/23/880f56db47946db499fc02d311aa4335_20241223173013A001.jpg地址其实映射完成之后是: http://localhost:8080/profile/avatar/2024/12/23/880f56db47946db499fc02d311aa4335_20241223173013A001.jpg
  • 但是接下来又发现一个其他的问题, 映射之后的这个接口在后端代码中找不到,后端找不到没有/profile开头的接口
  • 然后如果接口没有的话,那肯定会有对应的各种拦截器去处理的,所以就会在对应的代码中找到如下一个拦截器
    在这里插入图片描述

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接口
在这里插入图片描述

后端代码:

在这里插入图片描述

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

这里代码将文件上传并生成一个新的路径: /profile/avatar/2024/12/24/a54fead71fadeea5edb27e5031a694ec_20241224111039A001.jpg
在这里插入图片描述
然后数据库中存储的就是该路径,回显的时候该路径会通过上面的静态资源处理器转换成对应的本地路径对应的文件流!
至此, 若依的上传文件及回显功能,算是彻底搞明白了!的确是一个很好的思路。学习到了!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/65150.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

仓颉编程语言的未来何去何从?--探索可持续发展

引言 作为一门具有革命性特点的编程语言&#xff0c;仓颉编程语言凭借自然语言式语法、高效的智能推断能力和多场景适用性&#xff0c;在短时间内赢得了开发者的广泛关注。然而&#xff0c;任何一门语言的发展都伴随着机遇与挑战。仓颉虽然在多个领域表现出了强大的能力&#…

Linux 文件 I/O 基础

目录 前言 一、文件描述符&#xff08;File Descriptor&#xff09; 二、打开文件&#xff08;open 函数&#xff09; 三、读取文件&#xff08;read 函数&#xff09; 四、写入文件&#xff08;write 函数&#xff09; 五、关闭文件&#xff08;close 函数&#xff09; …

【CSS in Depth 2 精译_091】15.4:让 CSS 高度值过渡到自动高度 + 15.5:自定义属性的过渡设置(全新)+ 15.6:本章小结

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第五部分 添加动效 ✔️【第 15 章 过渡】 ✔️ 15.1 状态间的由此及彼15.2 定时函数 15.2.1 定制贝塞尔曲线15.2.2 阶跃 15.3 非动画属性 15.3.1 不可添加动画效果的属性15.3.2 淡入与淡出 15.4 过…

路由器的原理

✍作者&#xff1a;柒烨带你飞 &#x1f4aa;格言&#xff1a;生活的情况越艰难&#xff0c;我越感到自己更坚强&#xff1b;我这个人走得很慢&#xff0c;但我从不后退。 &#x1f4dc;系列专栏&#xff1a;网路安全入门系列 目录 路由器的原理一&#xff0c;路由器基础及相关…

硬件设计:LVDS电平标准

什么是LVDS&#xff1f; LVDS&#xff08;Low-Voltage Differential Signaling&#xff09;是一种高速、低功耗的差分信号传输标准。它通过一对差分信号线&#xff08;通常是两根互补信号线&#xff09;来传输数据&#xff0c;广泛应用于高速数字通信领域。 LVDS 的核心特点 低…

spring专题笔记(七):spring如何引入外部属性文件?spring在xml配置bean时如何引入外部的properties属性文件内容?

目录 1、spring在xml配置bean时引入外部的properties属性文件内容作用是什么&#xff1f; 2、引入配置文件步骤 2.1、首先创建一个java类MyDataSource&#xff0c;主要包含四个属性。 2.2、准备一个myDataConfig.properties属性文件&#xff0c;里面配置MyDataSource类中需…

梳理你的思路(从OOP到架构设计)_认识框架(Framework) 01

目录 1、 是框架的核心要素​编辑&i> 范例1&#xff1a; 范例2&#xff1a; 范例3&#xff1a; 1、 <E&I>是框架的核心要素 在特定领域(Domain)里&#xff0c;将EIT造形的<E&I>部份有意义地组合起来&#xff0c;就成为框架(Framework)了。基本…

邮件白名单是什么?

邮件白名单是一种电子邮件过滤规则&#xff0c;用于指定哪些发件人、域名或IP地址的邮件被允许通过过滤系统&#xff0c;不受任何限制地进入收件人的邮箱。与黑名单&#xff08;用于阻止特定发件人的邮件&#xff09;相反&#xff0c;白名单确保了来自受信任来源的邮件能够畅通…

Maven项目中不修改 pom.xml 状况下直接运行OpenRewrite的配方

在Java 的Maven项目中&#xff0c;可以在pom.xml 中配置插件用来运行OpenRewrite的Recipe&#xff0c;但是有一些场景是希望不修改pom.xml 文件就可以运行Recipe&#xff0c;比如&#xff1a; 因为不需要经常运行 OpenRewrite&#xff0c;所以不想在pom.xml 加入不常使用的插件…

JVM实战—2.JVM内存设置与对象分配流转

大纲 1.JVM内存划分的原理细节 2.对象在JVM内存中如何分配如何流转 3.部署线上系统时如何设置JVM内存大小 4.如何设置JVM堆内存大小 5.如何设置JVM栈内存与永久代大小 6.问题汇总 1.JVM内存划分的原理细节 (1)背景引入 (2)大部分对象的存活周期都是极短的 (3)少数对象…

外部化内部类

要定义一个新的名字空间&#xff0c;将一个类内部的类提到外部&#xff0c;目的是降低类的耦合度和复杂度&#xff0c;这通常可以通过 外部化内部类 来实现。通过这种方式&#xff0c;可以将复杂的实现细节分离到一个单独的名字空间中&#xff0c;让外部类的接口保持简洁。接下…

创建仓颉编程语言的第一个项目

创建仓颉编程语言的第一个项目 安装仓颉编程语言编译器第一个仓颉项目 安装仓颉编程语言编译器 安装仓颉编程语言编译器&#xff0c;是一个需要非常强的动手能力的过程——有大量的命令行操作。这不是仓颉编程语言独有的特点。现在流行的编程语言&#xff0c;比如 kotlin、jav…

kong网关使用pre-function插件,改写接口的返回数据

一、背景 kong作为api网关&#xff0c;除了反向代理后端服务外&#xff0c;还可对接口进行预处理。 比如本文提及的一个小功能&#xff0c;根据http header某个字段的值&#xff0c;等于多少的时候&#xff0c;返回一个固定的报文。 使用到的kong插件是pre-function。 除了上…

计算机网络:IP地址相关知识总结

目录 一、IP地址的表现形式 1.1 十进制表示形式 1.2 二进制表示形式 1.3 转换示例介绍 二、IP地址的组成 2.1 网络ID 2.2 主机ID 2.3 示例 三、IP地址的分类 3.1 A类地址 3.2 B类地址 3.3 C类地址 3.4 D类地址 3.5 E类地址 四、常见的特殊IP地址 五、IP地址二进…

基础练习 Huffman树,C++,最小堆,STL

Description Huffman树在编码中有着广泛的应用。在这里&#xff0c;我们只关心Huffman树的构造过程。 给出一列数{pi}{p0, p1, …, pn-1}&#xff0c;用这列数构造Huffman树的过程如下&#xff1a; 1. 找到{pi}中最小的两个数&#xff0c;设为pa和pb&#xff0c;将pa和pb从{…

Java获取自身被调用点

1. 场景 打印日志的时候&#xff0c;需要获取是在哪个地方被调用了&#xff0c;把调用点的信息一并打印出来。 2. 获取自身被调用点的方法 可以通过获取线程的调用栈&#xff0c;遍历后找到调用点。 3. 代码实现 import java.text.SimpleDateFormat; import java.util.Dat…

vue3入门教程:teleport

一、基本语法 Teleport组件的基本语法如下&#xff1a; <Teleport to"目标选择器"><!-- 要传送的内容 --> </Teleport>其中&#xff0c;to属性指定了内容将被渲染到的目标位置&#xff0c;它可以是一个CSS选择器字符串&#xff08;如#some-id、.…

群晖Cloud Sync一键同步让数据管理变得简单

前言&#xff1a;在这个数字化爆炸的时代&#xff0c;数据管理和备份已经变得不可或缺。无论是个人用户还是企业&#xff0c;都需要一种既高效又可靠的方式来管理和备份分散在各种设备和云存储中的文件。而群晖的 **Cloud Sync** 套件正是为了解决这个问题而生。 Cloud Sync 是…

docker 部署mysql8

在Docker中部署MySQL 8是一个相对简单的过程。以下是基本的步骤&#xff1a; 拉取MySQL 8镜像&#xff1a; 使用Docker命令拉取最新的MySQL 8镜像&#xff1a; docker pull registry.openanolis.cn/openanolis/mysql:8.0.30-8.6创建并运行MySQL容器&#xff1a; 创建并运行MySQ…