Layui框架实现图片上传

前言：

一直以来，图片上传总是件很麻烦的事。最近在学layui，发现layui真是极大简化了各种复杂的操作，避免了繁琐的开发。
layui图片上传和传统的图片上传不同，它并不予表单元素并存，而是单独通过异步来上传到后端，继而进行之后的操作。所以，编写表单代码时，并不需要添加enctype=“multipart/form-data” 和 input type=“file” 相关组件了，直接写最原始的表单就行。

附上完整demo：https://github.com/BraisedPanda/StudentSystem2.5
demo里面新建人员中有图片导入功能，static下的sql文件夹里有完整的数据库表和测试数据，登录界面登录名：zhangsan 密码：123

前端代码：

<form class="layui-form" action="/add_user" method="post"><div class="layui-form-item"><label class="layui-form-label">用户名:</label><div class="layui-input-block"><input type="text" name="username" lay-verify="username"   placeholder="填写用户名" autocomplete="off" class="layui-input username"></div></div><div class="layui-form-item"><label class="layui-form-label">密码:</label><div class="layui-input-block"><input type="text" name="password" lay-verify="password"  placeholder="请填写6到12位密码" autocomplete="off" class="layui-input password"></div></div><div class="layui-form-item"><label class="layui-form-label ">性别:</label><div class="layui-input-block"><input type="radio" name="gender" value="man" title="男" checked=""><input type="radio" name="gender" value="woman" title="女"></div></div><!--************这里是上传图片的代码***************--><!--************这里添加的隐藏的输入框，用来传递images的参数***************--><input type="hidden" name="images" class="image"><div class="layui-form-item"><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><!--************上面里是上传图片的代码***************--><br><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit="" lay-filter="demo1">修改</button>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;<button type="reset" class="layui-btn layui-btn-radius  layui-btn-danger">重置</button></div></div><br>
</form>

tips:

1、白色的是隐藏的输入框，用来传递images的src地址的，因为图片不同于表单一起传数据，所以只能借助js代码来绑定参数
2、黄色框子里就是上传图片的组件了，可以把它夹在form表单中

js代码

<script>layui.use('upload', function(){var $ = layui.jquery,upload = layui.upload;//普通图片上传var uploadInst = upload.render({elem: '#test1',url: '/upload/',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>

tips

1、js代码重点是黄色框子里的内容
fileupload.attr(“value”,res.data.src);
res.data.src是获取后端传过来的图片的url,之后给表单的隐藏图片输入框赋值即可。

后端代码：

 //图片上传测试@ResponseBody@RequestMapping("upload")public Map 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:\\mycode\\LayUiTest\\src\\main\\resources\\static\\images\\" + dateStr+"\\"+uuid+"." + prefix;File files=new File(filepath);//打印查看上传路径System.out.println(filepath);if(!files.getParentFile().exists()){files.getParentFile().mkdirs();}file.transferTo(files);Map<String,Object> map2=new HashMap<>();Map<String,Object> map=new HashMap<>();map.put("code",0);map.put("msg","");map.put("data",map2);map2.put("src","/images/"+ dateStr+"/"+uuid+"." + prefix);return map;}}catch (Exception e){}finally{try {if(out!=null){out.close();}if(fileInput!=null){fileInput.close();}} catch (IOException e) {}}Map<String,Object> map=new HashMap<>();map.put("code",1);map.put("msg","");return map;}

tips:
1、后端代码就按照以前传统的图片上传代码来写就行，唯一区别的就是向前端传一个json串，json串里包括图片的url地址

这样，整个流程就完成了，其中最关键的就是后端代码了。
流程：图片先自己上传到后端
——》后端存储图片，并把存储地址给前端
——》前端的js代码获取到后端传来的图片存储地址，把这个url赋值给表单中的隐藏的图片输入项
——》图片输入框中有了地址，并随着表单其他内容一起提交~

效果展示：

前端页面：

数据库：

详细见官方文档：https://www.layui.com/doc/modules/upload.html

前面的demo内容预览

预览

`登录界面`

`学生列表`

`班级列表`

`添加学生`

`我的考试成绩`

`各班级考试成绩`

`所有角色一览`

`各角色对应的权限`

`新建权限角色（可定制可观看的菜单和对应的操作按钮）`

`授予某个用户权限`