SpringBoot 结合layUI实现文件上传

首先是网站的配置：先是pom文件的引入，在此把整个文件全拷贝了：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.3.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.platform</groupId>
	<artifactId>platform</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>platform</name>
	<description>Demo project for Spring Boot</description>
	
	<properties>
		<java.version>1.8</java.version>
	    <thymeleaf.version>3.0.11.RELEASE</thymeleaf.version>
		<thymeleaf-layout-dialect.version>2.4.1</thymeleaf-layout-dialect.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
		    <groupId>mysql</groupId>
		    <artifactId>mysql-connector-java</artifactId>
		    <version>6.0.6</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.codehaus.jackson/jackson-mapper-asl -->
		<dependency>
		    <groupId>org.codehaus.jackson</groupId>
		    <artifactId>jackson-mapper-asl</artifactId>
		    <version>1.9.13</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.codehaus.jackson/jackson-core-asl -->
		<dependency>
		    <groupId>org.codehaus.jackson</groupId>
		    <artifactId>jackson-core-asl</artifactId>
		    <version>1.9.13</version>
		</dependency>
		
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>1.1.1</version>
		</dependency>
		
		<!-- 数据库连接池 -->
		 <!-- https://mvnrepository.com/artifact/com.alibaba/druid -->
		<dependency>
		    <groupId>com.alibaba</groupId>
		    <artifactId>druid</artifactId>
		    <version>1.1.6</version>
		</dependency>
		
		<!-- kaptcha验证码 -->
		
   		<dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>
 
		<dependency>
		    <groupId>org.springframework.boot</groupId>
		    <artifactId>spring-boot-starter-thymeleaf</artifactId>
	    </dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
		</dependency>
		<!-- MyBatis分页 -->
		<!-- 分页插件 -->
		<dependency>
		    <groupId>com.github.pagehelper</groupId>
		    <artifactId>pagehelper-spring-boot-starter</artifactId>
		    <version>1.2.5</version>
		</dependency>
		
		    <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
		<dependency>
		    <groupId>commons-fileupload</groupId>
		    <artifactId>commons-fileupload</artifactId>
		    <version>1.2.2</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
		<dependency>
		    <groupId>commons-io</groupId>
		    <artifactId>commons-io</artifactId>
		    <version>2.6</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->
		<dependency>
		    <groupId>commons-codec</groupId>
		    <artifactId>commons-codec</artifactId>
		    <version>1.9</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.json/json -->
		<dependency>
		    <groupId>org.json</groupId>
		    <artifactId>json</artifactId>
		    <version>20160810</version>
		</dependency>
		
		<!-- https://mvnrepository.com/artifact/cn.songxinqiang/com.baidu.ueditor -->
		<dependency>
		    <groupId>cn.songxinqiang</groupId>
		    <artifactId>com.baidu.ueditor</artifactId>
		    <version>1.1.2-offical</version>
		</dependency>
		
		<!-- jstl -->
		<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>jstl</artifactId>
		</dependency>
		<!-- jasper -->
		<dependency>
		<groupId>org.apache.tomcat.embed</groupId>
		<artifactId>tomcat-embed-jasper</artifactId>
		<scope>provided</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

全局配置文件application.properties的配置：

spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/platform?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
mybatis.type-aliases-package=com.platform.pojo
spring.resources.chain.cache=false
#分页插件
pagehelper.helper-dialect=mysql
pagehelper.params=count=countSql
pagehelper.reasonable=true
pagehelper.support-methods-arguments=true
spring.thymeleaf.cache=false

 

前端界面，直接在layUI官网的文档上复制过来就行。

         <form method="post" id="sourceupload">
			<div style="padding-left: 50px;margin-bottom: 25px;">
			    <button type="button" class="layui-btn layui-btn-primary" id="test4"><i class="layui-icon"></i>资源上传</button>
				<input type="text" name="sourcename" required lay-verify="required" placeholder="请输入资源名称"class="layui-input" style="width: 420px;display: inline; margin-left: 25px;">
				<input type="text" name="sourcepath" id="sourcepath" style="width: 420px;display: none; margin-left: 25px;">
			</div>
			<textarea name="description" placeholder="请输入资源介绍" required lay-verify="required" class="layui-textarea" style="font-size: 15px;margin-bottom: 20ox;width: 800px;"></textarea>
			<button class="layui-btn" lay-submit lay-filter="uploadbtn" style="margin-left: 660px ;margin-top:25px;width: 120px;">立即提交</button>
        </form>

同时，layUI的js代码也是复制官网的文档的，再进行适当的修改一下，把上传成功的资源路径返回并赋值给一个隐藏的input，这样就可以使用表单实现把文件的路径、资源名字、还有简介保存于数据库：

	layui.use('upload', function(){
	  var upload = layui.upload;

  //执行实例
  var uploadInst = upload.render({
    elem: '#test4', //绑定元素
    accept: 'file',
    size: 307200,
    url: '/source/uploadSource', //上传接口  
    method: 'POST',
    done: function(res){
      //上传完毕回调
    	 layer.alert("上传成功！"+res.msg, {
				icon: 5,
				title: "提示"
				});
    	  $("#sourcepath").val(res.msg);
     
    }
    ,error: function(res){
      //请求异常回调
    	layer.alert("后台出错", {
			icon: 5,
			title: "提示"
			}); 
    }
  });
});

后台处理：在controller包中创建一个controller处理文件上传。方法如下：

/** 
	* @Title: uploadSource 
	* @Description: 文件上传，返回文件的存储路径 
	* @param file
	* @return Object
	* @author hzp
	* @date 2019年5月6日下午9:51:16
	*/ 
	@RequestMapping(value="/uploadSource" , method = RequestMethod.POST)
	@ResponseBody
	public String uploadSource(@RequestParam("file") MultipartFile file , HttpServletRequest request) {
		System.out.println(file);
		String pathString = null;
		if(file!=null) {
		pathString = "D:/upload/" + new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + "_" +file.getOriginalFilename();
		}
		
		try {
			File files=new File(pathString);
            //打印查看上传路径
            System.out.println(pathString);
            if(!files.getParentFile().exists()){
                files.getParentFile().mkdirs();
            }
			file.transferTo(files);
			
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} 
 
		return "{\"code\":0,\"msg\":\""+pathString+"\"}";
	}

这里需要注意的是，layUI文档规定了，返回值必须是json数据，并且有格式要求，具体格式如下：

{
  "code": 0
  ,"msg": ""
  ,"data": {
    "src": "http://cdn.layui.com/123.jpg"
  }
}  

最后测试一下便可以实现了。