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>
頁面效果如下
代碼如下：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;
} 這裡的上傳是調用釘釘服務上傳檔案