我在上一篇文章SSM+Layui实现文件上传服务器中展示了如何将图片上传至服务器，保存到SQL server数据库中，本篇文章主要讲的是将图片上传到服务器上，保存在服务器的磁盘上，然后将图片路径保存到数据库中，最后实现在客户端展示图片。

在上一篇文章末尾，我阐述了两种图片(文件)上传到服务器后不同的保存方式。直接存放到数据库中，适合图片较小、数量少的应用场景，因为从数据库中读取图片数据会比较慢，特别实在图片较大、网络环境差的情况下。把图片存放到服务器磁盘、数据库存放图片存放路径，前台页面直接通过路径访问图片，这种方式适合需要展示的图片数量多的场景下。

技术框架说明

前台采用的是Layui框架，后台采用Java的SSM框架。前台的框架可以替换成其他的框架，主要功能实现的逻辑在于Java部分的代码。

上传图片的html

layui上传代码

上传图片JS

引入layui.js，使用upload模块

上传js

这是上传的js代码，具体的解释请转到我上一篇文章查看。

需要的jar包和springmvc-config.xml配置

maven的jar包

springmvc-config.xml配置

上传Java代码(重点)

①、使用MultipartFile来接收前台传过来的文件，记得设置@RequestParam("file")。其中file我没有找到关于它的说明，这个和bootstrap的文件上传有区别。

②、设置url路径，这个存放到数据库中，后续前台展示图片就是直接将这个url赋值到img标签的src上。url=returnUrl+fileName组成。重点是returnUrl的形式是：

http://+服务器的IP:端口号③、fileName重新设置图片的名字。需要考虑上传的图片存在重名的情况，我这里采用了时间+随机数的方式对图片重新命名。

getServerIp方法

以上两个方法是获取服务器IP的方法。

将图片重命名，存放到服务器的指定位置后，将路径存放到数据库，展示的时候直接在数据库中查询然后将图片的url替换到img标签的src上即可。

配置tomcat虚拟路径(重点)

存放完图片后，在实现前台展示前，最重要的是在tomcat中配置虚拟路径。

数据库中存放的url路径的形式是这样的：

在tomcat的conf文件夹下打开server.xml进行编辑：

server.xml

拉到文件最后，在Host便签内添加：

其中，docBase指向你存放图片的文件夹，path为虚拟的项目名。配置完使用tomcat启动项目，就能正常访问到图片。

在开发中，我们经常会使用eclipse启动tomcat，这个时候tomcat的配置就不生效，因为这种方式启动tomcat时，使用的时eclipse的tomcat配置，因此，还需要在eclipse修改tomcat的配置，具体操作如下：

双击server中的tomcat，打开tomcat的配置，选择Modules选项卡

点击Add External Web Module. ，Document base输入图片存放的文件夹路径，在path输入虚拟项目名，保存即可完成eclipse中tomcat的虚拟路径配置

至于如何展示到前台的代码我就不放图了。将你需要展示的图片url查询传递到前台，赋值到img标签的src即可。

推荐阅读：

1、Layui怎么实现根据table行数据显示不同按钮

2、sqlserver——with as使用方法和注意事项

3、Java 非对称加密算法实现登陆账号密码加密传输功能

举报/反馈