layui 上传图片文件到钉钉服务器

桃扇骨 2023-07-21 11:07 28阅读 0赞

### layui上传 ###

*   *  layui版本
     *  项目引入
     *  页面引入
     *  java后台接收
     *  参考文献

## layui版本 ##

首先先下载layui-2.5.6.zip包，解压后选择自己用到的文件放入项目中。  
下载地址：https://download.csdn.net/download/csdn565973850/12299623

## 项目引入 ##

我的项目中只用到了upload功能，其他未使用，所以引入如下：  
![20200403151925926.png][]

## 页面引入 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70 1][]  
具体页面代码如下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>

页面效果如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70 2][]

## java后台接收 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70 3][]  
代码如下：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;
        }

这里的上传是调用钉钉服务上传文件

## 参考文献 ##

[layui文档][layui]  
[钉钉开发文档][Link 1]

[20200403151925926.png]: /images/20230528/d7a86e5a152047e4af837d6d30f1fc50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70]: /images/20230528/e8929a5a5dae4779a32b02dd50d8cf48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70 1]: /images/20230528/3a5c6ee0917448b8983370f4a9ffb46d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70 2]: /images/20230528/fc9d15e8705242ee9c3832b64ec65f2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70 3]: /images/20230528/391f18561a72479e868e799399bcf0fd.png
[layui]: https://www.layui.com/doc/modules/upload.html
[Link 1]: https://ding-doc.dingtalk.com/doc#/serverapi2/bcmg0i