layui+springmvc实现文件异步上传
本文内容纲要：
一.单文件上传
前端代码
<div class="layui-upload">
<div class="layui-upload-list">
<imgclass="layui-upload-img"id="demo1">
<pid="demoText"></p>
</div>
<buttontype="button"class="layui-btn"id="upload_btn">上传图片</button>
</div>
layui.use('upload',function(){
var$=layui.jquery
,upload=layui.upload;
//普通图片上传
varuploadInst=upload.render({
elem:'#upload_btn'
,url:'/uploadImg'
,before:function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index,file,result){
$('#demo1').attr('src',result);//图片链接（base64）
});
}
,done:function(res){
//如果上传失败
if(res.code===0){
returnlayer.msg('文件上传成功!');
}
if(res.code===2){
returnlayer.msg('不支持该上传类型');
}
if(res.code===3){
returnlayer.msg('文件为空');
}else{
returnlayer.msg('文件上传异常');
}
//上传成功
}
,error:function(){
//演示失败状态，并实现重传
vardemoText=$('#demoText');
demoText.html('<spanstyle="color:#FF5722;">上传失败</span><aclass="layui-btnlayui-btn-minidemo-reload">重试</a>');
demoText.find('.demo-reload').on('click',function(){
uploadInst.upload();
});
}
});
});
后端代码
在这边遇到一些问题：
1.springmvc的xml需要配置文件上传的类，否则会接收不了上传的文件
<beanid="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--设置上传文件最大尺寸，单位为B-->
<propertyname="maxUploadSize"value="1000000000"/>
</bean>
2.接收文件需要用@RequestParam("file")指定参数名称，layui默认文件上传的name是file
3.获取项目的绝对路径并拼接成新的图片地址
@Controller
publicclassFileUploadController{
@RequestMapping("/uploadImg")
@ResponseBody
publicRetResultupload(@RequestParam("file")MultipartFilemultipartFile,HttpSessionsession){
if(!StringUtils.isEmpty(multipartFile)&&multipartFile.getSize()>0){
Stringfilename=multipartFile.getOriginalFilename();
Stringsuffix=filename.substring(filename.lastIndexOf(".")+1);
if(filename.endsWith("jpg")||filename.endsWith("png")){
StringrealPath=session.getServletContext().getRealPath("/")+"/image/"+newDate().getTime()+"."+suffix;
Filenewfile=newFile(realPath);
try{
multipartFile.transferTo(newfile);
returnRetResult.successRet(null);
}catch(IOExceptione){
e.printStackTrace();
returnRetResult.errorRet(1,"文件上传异常");
}
}else{
returnRetResult.errorRet(2,"不支持该上传类型");
}
}else{
returnRetResult.errorRet(3,"文件为空");
}
}
}
本文内容总结：
原文链接：https://www.cnblogs.com/wangxiayun/p/9265248.html