Layui上传图片和表单提交（SpringBoot项目后台接收请求信息）

1.到这一步，说明layui所需的环境你已经配好了(引入了相关依赖)

2.图片上传

a.html中引入div

            长传凭据
    
            

                多图片上传
                

                    预览图：
                    

                
            

b.再引入js，这个和 Ajax请求差不多

data中可以携带参数，#test2 是图片按钮的id，url是后台地址，done函数中处理后台响应

 //多图片上传
  upload.render({
    elem: '#test2'
    ,url: '/upload/img'
    ,multiple: true
    ,data : {"name":"zyb","age",22}
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo2').append('')
      });
    }
    ,done: function(res){
      //上传完毕
            if (res.code>0){
                 return layer.msg('图片上传失败');
             }else{
                 return layer.msg('图片上传成功');
             }
    }
  });

c.java后台接收

@RequestMapping(value = "/upload/img", method = {RequestMethod.POST})
@ResponseBody
public Object upload(@RequestParam(value="file",required=false) MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws Exception {
          Map map=new HashMap<>();
          String name = request.getParameter("name");//获取data中数据
	 if (file!=null){
	        //获取文件名
            String fileName = file.getOriginalFilename();
            map.put("code",0);
        }else {
            map.put("code",1);
        }

		return map;
	}

3.表单提交

a.为了看的简洁，我贴一个div，后面的大家自己去官方找一下，中文官网都能看得懂

账单明细填写
    

        

            账单名称
            

                
            
        
		 

            

                立即提交
                重置
            
        
    

b.js代码，下面这段代码在官网上有（https://www.layui.com/demo/upload.html）

//form表单验证
layui.use(['form', 'layedit', 'laydate'], function(){
    var form = layui.form
        ,layer = layui.layer
        ,layedit = layui.layedit
        ,laydate = layui.laydate;

    //看这里~~~~
    //监听提交，这里监听了按钮
    form.on('submit(demo1)', function(data){
		//data中就是你提交的数据，下面打印出来数据，是key value样子的。
		//key 就是  div中 name的值（ name="title"），也就是"title",可以自己试一下。
        /*layer.alert(JSON.stringify(data.field), {
            title: '最终的提交信息'
        })
           return false;
        */

        //这里请求后台
        $.ajax({
            url:"/mySubmit",
            data:JSON.stringify( data.field),
            dataType:'JSON',
            contentType : "application/json",
            type:'POST',
            success :function (result) {
                layer.msg(result.msg)
            }
        })
    });
});

c.java后台接收

 @PostMapping("/mySubmit")
 @ResponseBody
public Map mySubmit(@RequestBody Map reqMap){
        System.out.println( reqMap.get("title"));
        Map map = new HashMap<>();
        map.put("msg","成功");
        return map;
 }

总结：Layui还是很好用的，中文官方文档，看起来没难度，遇到bug多调试，多思考，就能解决。给Layui作者点赞！