layui+ssm（maven）实现上传图片教程
文章目录
- 前言
- 一、后端前期配置
-
- 1.修改配置文件
- 2.Tomcat设置
- 二、后端代码编写
- 三、前端layui的操作
-
- 1.html的结构
- 总结
前言
使用maven管理的ssm框架结合layui的html框架实现图片上传，把图片保存到本地，把图片地址保存到数据库。
一、后端前期配置
1.修改配置文件
springmvc.xml下添加如下代码
<!-- 文件上传的解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 上传图片的最大尺寸 10M-->
<property name="maxUploadSize" value="10485760"></property>
<!-- 默认编码 -->
<property name="defaultEncoding" value="utf-8"></property>
</bean>
如果看不懂，我下边是完整的配置xml文件
applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:tx="http://www.springframework.org/schema/tx" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop" xmlns:p="http://www.springframework.org/schema/p"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.2.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-3.2.xsd">
<!-- 动态扫描 -->
<context:component-scan base-package="com.neusoft.*"></context:component-scan>
<!-- 配置数据库相关参数properties的属性：${url} -->
<!-- <context:property-placeholder location="classpath:jdbc.properties"/>-->
<!-- 数据库连接池 -->
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<property name="driverClass" value="com.mysql.cj.jdbc.Driver"/>
<property name="jdbcUrl" value="jdbc:mysql://localhost:3306/test1?serverTimezone=GMT%2B8"/>
<property name="user" value="root"/>
<property name="password" value="123456"/>
</bean>
<!-- sessionFactory 将spring和mybatis整合 spring和springMVC不需要整合
SqlSessionFactory factory = new SqlSessionFactoryBuilder().build(is);-->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="configLocation" value="classpath:mybatis-config.xml" />
<property name="mapperLocations" value="classpath:com/neusoft/mapper/*.xml" /><!-- 加载mapper文件 -->
</bean>
<!-- dao mapping接口扫描
自动给dao层生成一个对象和注解 -->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.neusoft.dao" />
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" />
</bean>
<!-- 事务 -->
<bean id="txManager"
class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource" />
</bean>
<tx:advice id="txAdvice" transaction-manager="txManager">
<tx:attributes>
<tx:method name="insert*" propagation="REQUIRED" />
<tx:method name="update*" propagation="REQUIRED" />
<tx:method name="delete*" propagation="REQUIRED" />
<tx:method name="select*" propagation="REQUIRED" read-only="true" />
<tx:method name="get*" propagation="REQUIRED" read-only="true" />
</tx:attributes>
</tx:advice>
<aop:config>
<aop:pointcut expression="execution(* com.neusoft.service.*.*(..))"
id="pointCut" />
<aop:advisor advice-ref="txAdvice" pointcut-ref="pointCut" />
</aop:config>
</beans>
springMVC-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.2.xsd
">
<!-- 自动注册注解配置-->
<mvc:annotation-driven />
<context:component-scan base-package="com.neusoft.*"></context:component-scan>
<!--
通过mvc:resources设置静态资源，这样servlet就会处理这些静态资源，而不通过控制器
设置不过滤内容，比如:css,js,img 等资源文件
location指的是本地的真实的物理路径 ，mapping指的是映射到的虚拟路径(比如前端请求的url地址)。-->
<mvc:resources mapping="/css/**" location="/css/**"/>
<mvc:resources mapping="/js/**" location="/js/**"/>
<mvc:resources mapping="/framework/**" location="/framework/**"/>
<!-- 视图解析器 -->
<bean id="jspViewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<!-- <property name="prefix" value="/WEB-INF/jsp/"/>-->
<!-- <property name="suffix" value=".jsp" />-->
</bean>
<!-- 文件上传的解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 上传图片的最大尺寸 10M-->
<property name="maxUploadSize" value="10485760"></property>
<!-- 默认编码 -->
<property name="defaultEncoding" value="utf-8"></property>
</bean>
<mvc:annotation-driven/>
<mvc:default-servlet-handler/>
</beans>
建议不要直接复制我的配置文件，我的可能和你的不一样。
2.Tomcat设置
添加你要放图片的路径，路径设置在项目的webapp里（这个后边写代码的时候要用到！！！！）
要是你不知道你项目的文件路径怎么办？？？
看我操作
鼠标右击images文件夹选择show in Explorer
这路径不用我在教你了吧
二、后端代码编写
maven要引入依赖，但是我maven依赖有点多不好找，这里我直接粘导的包，不然这里得有不少同学卡住。
如果没有的话记得添加maven依赖。看好我的包是哪个包，别add错了（在报红的位置键盘快捷键 alt+insert，选择add***进行添加）
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.util.*;
接下来是代码部分，由于layui需要返回指定的json类型数据，所以我对数据进行了封装。如果你们使用的不是layui可以不用想我这样定义Map
//添加图片
@RequestMapping("up.do")
@ResponseBody
public Map up(MultipartFile file) {
Map map = new HashMap();
Map data = new HashMap();
System.out.println("进入上传");
//设置图片保存的本地路径 前缀路径
//之前设置Tomcat的imgages路径
String filePath = "B:\\DATA\\IDEA_DATA\\JAVA\\test\\src\\main\\webapp\\images\\";
// 获取原始图片的扩展名
String originalFilename = file.getOriginalFilename();
// 使用uuid生成文件新的名字
String newFileName = UUID.randomUUID() + originalFilename;
//.replace("-", "");去掉UUID的 - 这步可以不写，我不喜欢uuid的 - 符号，所以就去掉了
newFileName = newFileName.replace("-", "");
// 封装上传文件位置的全路径就是前缀加上文件名称
File targetFile = new File(filePath, newFileName);
try {
//保存图片，这里会抛一个异常
file.transferTo(targetFile);
} catch (IOException e) {
e.printStackTrace();
}
map.put("code", 0);
map.put("msg", "");
map.put("data", data);
data.put("src", "http://localhost:8080/images/" + newFileName);
return map;
}
把图片写入数据库
//添加图书
@RequestMapping(value = "addbook.do",produces = "text/html; charset=UTF-8")
@ResponseBody
public String addBook(String imgurl){
service.addBook(imgurl);
return "添加成功";
}
三、前端layui的操作
前端需要一个img标签用来上传图片，然后需要两个事件，一个点击上传图片的事件（选择完图片，确定后，保存到本地），一个是表单最终提交的事件（把图片地址给后端，后端吧图片url写入数据库）
1.html的结构
关于一些js和css文件的引入
layui的一些文件和jquery我都放在网盘里了
网盘地址
密码 82l6
layui下form的class="layui-form"必须要有，使用了一个div来包裹img,定义div的id，来进行上传图片后更新img，更新事件的绑定是div的id。
定义img的id，来进行src的设置，进而来显示图片 。
提交按钮lay-submit lay-filter="submitBut"必须要写
lay-filte相当于一种元素选择的形式，和后边表单提交有关（就好像我怎么知道你点这个按钮就是提交啊，把这个参数传给监听表单提交的事件，然后他就知道了，具体请看后边js部分）
<link rel="stylesheet" type="text/css" href="../../css/base.css">
<link rel="stylesheet" type="text/css" href="../../css/iconfont.css">
<script type="text/javascript" src="../jquery.3.min.js">script>
<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
<script type="text/javascript" src="../../layui/layui.js">script>
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">图书封面label>
<div class="layui-upload-drag" id="goodsPic">
<i class="layui-icon">i>
<p>点击上传，或将文件拖拽到此处p>
<hr>
<img class="layui-upload-img" id="demo1" style="max-width: 100px">
div>
div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submitBut">立即提交button>
div>
div>
form>
js的第一部分
1.我定义了一个全局变量sqlimgurl，用来设置图片的url地址
2.使用upload.render事件，实现对图片保存到本地和前端显示你选择的图片
该事件的具体参数讲解我都放在注释里了
var sqlimgurl='';
layui.use(['upload','form'], function() {
var form = layui.form;
var upload = layui.upload;
var layer = layui.layer;
//拖拽上传
upload.render({
//elem 是你定义的div 的id，进行绑定
elem: '#goodsPic',
//url是你后端设置的RequestMapping地址
url: '/up.do',
//预读本地文件示例，不支持ie8
//这个就是显示你选择图片后，前端img显示你的图片方法
before: function(obj){
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接（base64）
});
},
//上传成功之后执行的方法
done: function(res) {
//对全局变量进行赋值，等后边表单提交的时候把值传给后台
sqlimgurl=res.data.src
//这个就是个消息提示方法可写 可不写
layer.msg('上传成功');
}
});
js的第二部分
接着第一部分往下写，（第一部分的第二行）layui.use([‘upload’,‘form’], function() {
没有结束）
使用form表单把图片的url地址传给后台，并且写入数据库
具体讲解还是写到js的注释里
//监听form提交
//submit()是监听表单提交，里边加了参数，就是之前那个button的lay-filte属性值
form.on('submit(submitBut)', function(data) {
//ajax的post请求
$.post({
//后端RequestMapping地址
url: '/addbook.do',
data:{
//参数对应后台接受的参数名称，把图片地址传给后台
'imgurl':sqlimgurl,
},
//执行成功执行的方法
success: function (data) {
//ajax执行成功后提示添加成功
layer.msg('添加图书成功');
}
})
return false;
});
});//把js的第一部分结束不然标签没有闭合
到此上传图片的整个功能结束了。
总结
刚接触layui觉得框架还行，就是有很多地方还不是太明白。图片上传实现基本大同小异，有不明白的地方欢迎在下方评论区留言。