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