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

六月的雨在Tencent

发布于 2024-03-28 20:30:11

650

发布于 2024-03-28 20:30:11

文章被收录于专栏：CSDNCSDN

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;
    }

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