注意:请求上传接口的额外参数。如:data: {id: 'xxx'} 从 layui 2.2.6 开始,支持动态值
前台代码
<form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label"><span style="color: red">*</span >名称</label> <div class="layui-input-block"> <input type="text" name="name" id="name" lay-verify="required" autocomplete="off" placeholder="请输入名称" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"><span style="color: red">*</span>文件:</label> <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button type="button" class="layui-btn" id="test9">提交</button> </div> </div> </form>
js代码:
upload.render({ elem: '#test8' ,url: '/upimg' ,auto: false ,exts: 'png|jpg' ,acceptMime:"image/*"//规定打开文件选择框时,筛选出的文件类型 ,bindAction: '#test9' ,before: function(obj){ layer.load(1, { content: '添加中...', success: function (layero) { layero.find('.layui-layer-content').css({ 'padding-top': '39px', 'width': '60px' }); } }); this.data={"name":$("#name").val()}; } ,done: function(res){ layer.closeAll(); if(res.code==0){ layer.msg('添加成功', { time: 1000, icon: 1, offset: '50px' }, function () { location.reload() }); } },error: function () { layer.closeAll('loading'); //关闭loading layer.msg('上传失败'); } });
Springboot 后台接口
@PostMapping("/upimg") @ResponseBody public JSONObject userupimg(@RequestParam(value = "file")MultipartFile file, HttpServletRequest request) throws IOException { String name = request.getParameter("name"); System.out.println(name); JSONObject res = new JSONObject(); JSONObject resUrl = new JSONObject(); String filename = UUID.randomUUID().toString().replaceAll("-", ""); String ext = FilenameUtils.getExtension(file.getOriginalFilename()); String filenames = filename + "." + ext; String pathname = "D:\imgs\" + filenames; file.transferTo(new File(pathname)); resUrl.put("src", filenames); res.put("msg", ""); res.put("code", 0); res.put("data", resUrl); return res; }