一.单文件上传
前端代码
<div class="layui-upload"> <div class="layui-upload-list"> <img class="layui-upload-img" id="demo1"> <p id="demoText"></p> </div> <button type="button" class="layui-btn" id="upload_btn">上传图片</button> </div>
layui.use('upload', function() { var $ = layui.jquery , upload = layui.upload; //普通图片上传 var uploadInst = 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){ return layer.msg('文件上传成功!'); } if (res.code === 2) { return layer.msg('不支持该上传类型'); } if (res.code === 3) { return layer.msg('文件为空'); }else{ return layer.msg('文件上传异常'); } //上传成功 } , error: function () { //演示失败状态,并实现重传 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function () { uploadInst.upload(); }); } }); });
后端代码
在这边遇到一些问题:
1.springmvc的xml需要配置文件上传的类,否则会接收不了上传的文件
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 设置上传文件最大尺寸,单位为B --> <property name="maxUploadSize" value="1000000000" /> </bean>
2.接收文件需要用@RequestParam("file")指定参数名称,layui默认文件上传的name是file
3.获取项目的绝对路径并拼接成新的图片地址
@Controller public class FileUploadController { @RequestMapping("/uploadImg") @ResponseBody public RetResult upload(@RequestParam("file") MultipartFile multipartFile, HttpSession session){ if (!StringUtils.isEmpty(multipartFile) && multipartFile.getSize()>0){ String filename = multipartFile.getOriginalFilename(); String suffix = filename.substring(filename.lastIndexOf(".") + 1); if (filename.endsWith("jpg")||filename.endsWith("png")){ String realPath = session.getServletContext().getRealPath("/")+"/image/"+new Date().getTime()+"."+suffix; File newfile = new File(realPath); try { multipartFile.transferTo(newfile); return RetResult.successRet(null); } catch (IOException e) { e.printStackTrace(); return RetResult.errorRet(1,"文件上传异常"); } }else { return RetResult.errorRet(2,"不支持该上传类型"); } }else { return RetResult.errorRet(3,"文件为空"); } } }