注意:請求上傳接口的額外參數。如: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; }