layui上传
layui版本
首先先下载layui-2.5.6.zip包，解压后选择自己用到的文件放入项目中。
下载地址：https://download.csdn.net/download/csdn565973850/12299623
项目引入
我的项目中只用到了upload功能，其他未使用，所以引入如下：
页面引入
具体页面代码如下add.html
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" > <head> <th:block th:include="include :: header('新增钉钉工作通知消息模板')" /> <link href="../static/layui/layui.css" th:href="@{/layui/layui.css}" rel="stylesheet"/> </head> <body class="white-bg"> <div class="wrapper wrapper-content animated fadeInRight ibox-content"> <form class="form-horizontal m" id="form-msgTemplet-add"> <div class="form-group"> <label class="col-sm-3 control-label"><span style="color: red">*</span>模板名称：</label> <div class="col-sm-8"> <input id="templetName" name="templetName" class="form-control" type="text" th:required="true"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label"><span style="color: red">*</span>模板类型：</label> <div class="col-sm-8"> <select id="templetType" name="templetType" class="form-control m-b" required onchange="showBtn()"> <option value="text">文本</option> <option value="image">图片</option> <option value="file">文件</option> </select> </div> </div> <div class="form-group hide" id="uploadbtn"> <label class="col-sm-3 control-label"><span style="color: red">*</span>媒体文件：</label> <div class="col-sm-8"> <button type="button" class="layui-btn" id="uploadfile">上传文件</button> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label"><span style="color: red">*</span>模板内容：</label> <div class="col-sm-8"> <textarea id="content" name="content" class="form-control" type="text" th:required="true" ></textarea> </div> </div> </form> </div> <div th:include="include::footer"></div> <script src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script> <script type="text/javascript"> var prefix = ctx + "project/msgTemplet"; layui.use('upload', function(){ var upload = layui.upload; //执行实例 uploadInst = upload.render({ elem: '#uploadfile' //绑定元素 }); }); function showBtn() { var type = $("#templetType").val(); if (type == "image" || type == "file") { $("#content").attr("readonly",true); $("#uploadbtn").removeClass('hide'); uploadInst.reload({ elem: '#uploadfile' //绑定元素 ,url: prefix + '/upload/' //上传接口 ,data: {type: type} ,accept:'file' ,done: function(res){ //上传完毕回调 if (res.code == 0) { $("#content").val(res.data); layer.msg(res.msg); }else { layer.msg(res.msg); } } ,error: function(){ //请求异常回调 layer.msg('上传失败！'); } }); }else { $("#content").attr("readonly",false); $("#uploadbtn").addClass('hide'); } } $("#form-msgTemplet-add").validate({ rules:{ xxxx:{ required:true, }, }, focusCleanup: true }); function submitHandler() { if ($.validate.form()) { $.operate.save(prefix + "/add", $('#form-msgTemplet-add').serialize()); } } </script> </body> </html>
页面效果如下
java后台接收
代码如下：controller代码
@RequestMapping( "/upload") @ResponseBody public AjaxResult upload(MultipartFile file,HttpServletRequest request) { try { String type = request.getParameter("type"); OapiMediaUploadResponse rsp = dingDingService.uploadMedia(type,file); if (rsp.isSuccess()) { return new AjaxResult(AjaxResult.Type.SUCCESS,"上传成功！",rsp.getMediaId()); }else { return new AjaxResult(AjaxResult.Type.ERROR,rsp.getErrmsg()); } } catch (Exception e) { e.printStackTrace(); } return error(); }
service代码：
/** * 调用钉钉上传文件 * （1） 图片（image）:1MB，支持JPG格式 * （2）语音（voice）：2MB，播放长度不超过60s，AMR格式 * （3）普通文件（file）：10MB * @param type 文件类型 image file (voice暂不支持) * @param file 文件 * @return */ @Override public OapiMediaUploadResponse uploadMedia(String type, MultipartFile file) { try { //获取企业凭证 access_token String accessToken = getAccessToken(); DingTalkClient client = new DefaultDingTalkClient("https://oapi.dingtalk.com/media/upload"); OapiMediaUploadRequest req = new OapiMediaUploadRequest(); req.setType(type); req.setMedia(new FileItem(file.getOriginalFilename(),file.getInputStream())); OapiMediaUploadResponse rsp = client.execute(req, accessToken); return rsp; } catch (Exception e) { e.printStackTrace(); } return null; }
这里的上传是调用钉钉服务上传文件