Layui样式：
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="common/header::copy"></head>
<style type="text/css">
#demo2 > img {
width: 33%;
height: 115px;
}
#demo1 {
width: 100%;
height: 270px;
}
</style>
<body class="layui-layout-body" style="overflow: auto;">
<div class="layui-container">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" type="text">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">内容</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">封面图</label>
<div class="layui-input-block" id="test1" style="border: 1px solid #9F9F9F;">
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
</div>
</div>
<input type="hidden" name="lImage" value="" >
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">附加图片</label>
<div class="layui-input-block" id="test2">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图(可上传多张)：
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">立即重置</button>
</div>
</div>
</form>
</div>
</body>
<script type="text/javascript" data-th-inline="javascript">
layui.use(['form', 'layedit', 'upload'], function() {
var form = layui.form
, layer = layui.layer
, laydate = layui.laydate
, $ = layui.jquery
, upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: '/invitation/upload_one/'
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(res, file, result){
$('#demo1').attr('src', result); //图片链接（base64）
});
}
,done: function(res){
//如果上传失败
if(res.code == 200){
return layer.msg('上传失败');
}
// 将数据放到input框中
$("input[name='lImage']").val(res.extend.msg);
}
});
//多图片上传 （其实也是一个单文件上传）
upload.render({
elem: '#test2'
,url: '/invitation/upload_one/'
,multiple: true
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
});
}
,done: function(res){
//上传完毕
console.log(res);
$("#demo2").append('<input type="hidden" name="add_pic" value="'+ res.extend.msg +'"/>');
}
});
})
</script>
</html>控制器
/**
* @function 单文件上传
* @param file
* @return
*/
@PostMapping("/upload_one")
@ResponseBody
public Msg UploadImage(@RequestParam(value = "file", required = false) MultipartFile file){
if(file == null){
return Msg.fail().add("msg", "图片上传失败！");
}else{
String end = FileUpload.fileOne(file, StaticUtil.SAVE_URL, StaticUtil.FILE_TYPE);
return Msg.success().add("msg", end);
}
}工具类使用
/**
* @function 单文件上传
* @return
*/
public static String fileOne(MultipartFile file, String saveUrl, String fileType){
String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
String fileName = UUID.randomUUID() + suffix;
String newUrl = saveUrl+"\\"+now()+"\\"+"cover\\"+fileName;
System.out.println("文件路径：" + newUrl);
String[] type_array = fileType.split(",");
System.out.println("type : "+type_array.length);
File saveFile = new File(newUrl);
if(!saveFile.getParentFile().exists()){
saveFile.getParentFile().mkdirs();
}
try {
file.transferTo(saveFile);
} catch (IOException e) {
e.printStackTrace();
return "上传失败！";
}
return newUrl;
}静态变量类
public class StaticUtil {
public static final String SAVE_URL = "E:\\images";
public static final String FILE_TYPE = "jpeg,jpg,png";
}设置tomcat的访问路径
最好不要将图片和一些文件放在Tomcat的服务器目录下， 重启就什么也没有了。
在server.xml文件中找到 host 内，添加
<Context path="/demo/image" docBase="D:\demo\File\image"></Context>当你访问http://localhost:8080/demo/image/xxx.jpg 的时候，tomcat就会把请求转发，去请求tomcat所在的物理机上的D盘下D:\demo\File\file下的xxx.zip文件和xxx.jpg文件
当文件上传的时候只需要把相应的文件存放到相应的目录中在数据库中存放文件的路径：
这里最好在数据库中存放xxx.zip 或者xxxx.jpg这样的文件名
多文件上传
/**
* @function 多文件上传
* @param files
* @return
*/
@PostMapping("/upload_many")
@ResponseBody
public Msg UploadImages(@RequestParam(value = "file", required = false) MultipartFile[] files){
if(files.length == 0){
return Msg.fail().add("msg", "图片为空！");
}else{
List<String> lists = FileUpload.fileMany(files, StaticUtil.SAVE_URL, StaticUtil.FILE_TYPE);
return Msg.success().add("msg", lists);
}
}/**
* @function 多文件上传
* @return
*/
public static List<String> fileMany(MultipartFile[] files , String saveUrl, String fileType){
List<String> picUrl = null;
String newUrl = saveUrl + "\\" + now() + "\\pic\\";
File saveDir = new File(newUrl);
if(!saveDir.exists()){
saveDir.mkdirs();
}
for(MultipartFile file : files){
if(file != null){
String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
String fileName = UUID.randomUUID() + suffix;
String newFileUrl = newUrl+fileName;
File saveFile = new File(newFileUrl);
try {
file.transferTo(saveFile);
picUrl.add(newFileUrl);
} catch (IOException e) {
e.printStackTrace();
System.out.println("上传失败");
}
}
}
return picUrl;
}有错误欢迎指正，感谢！