目錄結構
在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