SSM + Layui 实现上传图片
前提准备
- SSM框架已经创建完成
第一步 :在pom.xml文件中导入上传文件所需的依赖
<!-- 上传下载需要设计到的jar包 -->
<!-- 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-fileupload/commons-fileupload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
第二步:修改配置文件 Springmvc.xml
<!--配置文件解析器对象-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="10485760"/>
</bean>
第三步:编写前端页面layuimini
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上传头像</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" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
<link rel="stylesheet" href="../../css/public.css" media="all">
<style>
.layui-form-item {width: auto;padding-right: 10px;line-height: 38px;}
</style>
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<form class="layui-form layuimini-form" >
<div class="layui-form-item">
<input type="hidden" name="images" class="image">
<label class="layui-form-label ">上传头像:</label>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
<p id="demoText"></p>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="addBtn">添加</button>
<button type="reset" class="layui-btn layui-btn-primary" >
<i class="layui-icon layui-icon-refresh"></i>
重置信息
</button>
</div>
</div>
</form>
</div>
</div>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
layui.use(['form','miniTab','jquery','upload'], function () {
var form = layui.form,
layer = layui.layer,
miniTab = layui.miniTab,
upload = layui.upload,
$ = layui.jquery;
//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: '${pageContext.request.contextPath}/client/uploadFile'
,accept:'images'
,size:50000
,before: function(obj){
obj.preview(function(index, file, result){
$('#demo1').attr('src', result);
});
},done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
var demoText = $('#demoText');
demoText.html('<span style="color: #4cae4c;">上传成功</span>');
var fileupload = $(".image");
fileupload.attr("value",res.data.src);
console.log(fileupload.attr("value"));
}
,error: function(){
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
});
</script>
</body>
</html>
第四步 后台方法实现
//资源上传
@ResponseBody
@RequestMapping(value = "/uploadFile",produces = "application/json;charset=utf-8")
public JSONObject upload(MultipartFile file,HttpServletRequest request){
String prefix="";
String dateStr="";
//保存上传
OutputStream out = null;
InputStream fileInput=null;
try{
if(file!=null){
String originalName = file.getOriginalFilename();
prefix=originalName.substring(originalName.lastIndexOf(".")+1);
Date date = new Date();
String uuid = UUID.randomUUID()+"";
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
dateStr = simpleDateFormat.format(date);
String filepath = "D:\\IdeaProjects\\ClientManage\\src\\main\\webapp\\images\\" + dateStr+"\\"+uuid+"." + prefix;
File files=new File(filepath);
//打印查看上传路径
System.out.println(filepath);
if(!files.getParentFile().exists()){
files.getParentFile().mkdirs();
}
file.transferTo(files);
JSONObject jo = new JSONObject();
JSONObject jo2 = new JSONObject();
jo.put("code",0);
jo.put("msg","上传成功");
jo2.put("src","images/"+ dateStr+"/"+uuid+"." + prefix);
jo.put("data",jo2);
System.out.println(jo);
return jo;
}
}catch (Exception e){
}finally{
try {
if(out!=null){
out.close();
}
if(fileInput!=null){
fileInput.close();
}
} catch (IOException e) {
}
}
JSONObject jo = new JSONObject();
jo .put("code",1);
jo .put("msg","");
return jo ;
}
遇到的问题及解决方法
No converter for [class net.sf.json.JSONObject] with preset Content-Type 'null’
解决方法:在pom .xml文件中新增以下依赖
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.11.3</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.11.3</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.11.3</version>
</dependency>