界面图片、文件回显"/>
通过数据库url,实现前端界面图片、文件回显
本篇文章将介绍通过数据库url,实现前端界面图片、文件回显。
文章目录
- 一、介绍
- 二、数据库
- 三、前端
- 三、效果图:
- 总结
一、介绍
本篇文章主要介绍的是根据
springboot+vue+mysql实现前端上传图片到本地并将url存入本地数据库的回显问题,在这里做一下介绍。
主要采用数据库查询url,通过url在数据库回显。
二、数据库
我这里将图片库和文件库分开建立,这里看个人要求
图片数据库:
文件的数据库
三、前端
前端图片回显:
<!-- 动态加载url -->
<!-- imageurl是一个数组 -->
<div style="padding-top:40px;padding-left:190px;" v-for="(item,index) in imageurl" :key="index" ><img style="width:400px;height:400px" :src="item.pictureurl" />
</div>
前端文件回显:
<div style="padding-left:100px;padding-bottom:100px;"><div style="font-size: 20px;"><span>下载专区:</span></div><!-- fileurl是一个数组 --><div v-for="(item,index) in fileurl" :key="index" style="padding-top: 10px;"><span>{{item.filename}}</span><!-- 采用超链接可以在这实现文件下载功能 --><a :href="item.fileurl">点击下载</a></div>
</div>
三、效果图:
图片回显:
文件回显:
说明:这里的名字未做处理,可根据个人需求在后端进行处理。
总结
希望本篇本章可以给大家带来收获,感谢阅读。
更多推荐
通过数据库url,实现前端界面图片、文件回显
发布评论