目录结构
在idea中新建一个springboot工程，组件选择web和thymleaf就够了。新建好项目之后，将layui放在static文件夹下，然后在templates文件夹下创建一个index.html文件
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>layui文件上传示例</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">选择图片</button>
<br>
<button type="button" class="layui-btn" id="btn">上传图片</button>
<div class="layui-upload-list">
<img style="width: 400px;height: 400px" id="demo1">
</div>
</div>
<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['upload','jquery'], function(){
var $ = layui.jquery
,upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: '/uploadFile'
,auto: false
,bindAction: "#btn"
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接（base64）
});
}
,done: function(res){
//如果上传失败
if(res.code > 0){
layer.msg('上传失败');
}
//上传成功
layer.msg('上传成功');
}
});
});
</script>
</body>
</html>
在controller下新建一个类，类名为File
package com.example.Controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class File {
/**
* index.html页面
* @return
*/
@RequestMapping("/file")
public String index(){
return "index";
}
}
在controller下新建一个类，类名为UploadFile
package com.example.Controller;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
@RestController
public class UploadFile {
@ResponseBody
/*@ResponseBody是作用在方法上的，@ResponseBody 表示该方法的返回结果直接写入 HTTP response body 中，
一般在异步获取数据时使用【也就是AJAX】。
注意：在使用 @RequestMapping后，返回值通常解析为跳转路径，但是加上 @ResponseBody 后返回结果不会被解析为跳转路径，
而是直接写入 HTTP response body 中。 比如异步获取 json 数据，加上 @ResponseBody 后，会直接返回 json 数据。
@RequestBody 将 HTTP 请求正文插入方法中，使用适合的 HttpMessageConverter 将请求体写入某个对象。
*/
@RequestMapping("/uploadFile")
public JSON uploadFile(MultipartFile file, HttpServletRequest request) {
JSONObject json=new JSONObject();
String filePath = "D:/uploadFile/";//上传到这个文件夹
File file1 = new File(filePath);
if (!file1.exists()) {
file1.mkdirs();
}
String finalFilePath = filePath + file.getOriginalFilename().trim();
File desFile = new File(finalFilePath);
if (desFile.exists()) {
desFile.delete();
}
try {
file.transferTo(desFile);
json.put("code",0);
} catch (Exception e) {
System.out.println(e.getMessage());
json.put("code",1);
}
return json;
}
}
最后直接run就可以了。
附工程文件：链接，提取码：2qws