通过数据库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>

三、效果图：

图片回显：

文件回显：
说明：这里的名字未做处理，可根据个人需求在后端进行处理。

总结

希望本篇本章可以给大家带来收获，感谢阅读。