summernote富文本批量上传音频,视频等附件

普通项目,HTML的summernote富文本批量上传音频,视频等附件(其他附件同理)

JS和CSS的引入

<head><th:block th:include="include :: summernote-css" />
</head>
<body><th:block th:include="include :: summernote-js" />
</body>

HTML标签

重点:class=“summernote” id=“messageContent”

<div class="col-sm-10"><input type="hidden" class="form-control" name="messageContent"><div class="summernote" id="messageContent"></div></div>

JQ

入口:[‘custom’, [‘myAudio’,‘myVideo’]] // 添加自定义组,一个是音频示例,一个是视频示例
自带的图片(onImageUpload)上传也改成批量上传了.
注意:这里的视频格式只能用H264编码的,不然HTML自带的播放器播放只有声音没画面!!!

$(function() {$('.summernote').summernote({toolbar: [['cleaner',['cleaner']],['style', ['style']],['font', ['bold', 'underline', 'clear']],['fontsize', ['fontsize']],['color', ['color']],['para', ['ul', 'ol', 'paragraph']],['table', ['table']],['insert', ['link','unlink','picture']],['custom', ['myAudio','myVideo']] // 添加自定义组],buttons: {myAudio: function () {var ui = $.summernote.ui;var button = ui.button({contents: '<i class="fa fa-file-audio-o"></i>',tooltip: '音频',click: function () {// 显示文件选择器var input = $('<input>').attr('type', 'file').attr('accept', 'audio/mp3').attr('multiple', '').on('change', function(e) {var files = e.target.files;if (files) {var formData = new FormData();// 遍历文件列表，并将它们添加到FormData对象中$.each(files, function(index, file) {formData.append("files", file);});$.ajax({url: ctx + "common/uploads", // 您的上传端点type: 'POST',data: formData,processData: false,contentType: false,success: function(result) {if (result.code == web_status.SUCCESS) {var urls = result.urls.split(','); // 根据后端定义的分隔符拆分URL字符串// 在编辑器中插入每个图片$.each(urls, function(index, url) {$('#messageContent').summernote('pasteHTML', '<audio src="' + url + '" controls="controls"></audio>');});} else {$.modal.alertError(result.msg);}},error: function(xhr, status, error) {// 处理上传错误$.modal.alertWarning("音频上传失败。");}});}});// 触发文件选择器input.click();}});return button.render();},myVideo: function () {var ui = $.summernote.ui;var button = ui.button({contents: '<i class="fa fa-file-video-o"></i>',tooltip: '视频',click: function () {// 显示文件选择器var input = $('<input>').attr('type', 'file').attr('accept', 'video/mp4').attr('multiple', '').on('change', function(e) {var files = e.target.files;if (files) {var formData = new FormData();// 遍历文件列表，并将它们添加到FormData对象中$.each(files, function(index, file) {formData.append("files", file);});$.ajax({url: ctx + "common/uploads", // 您的上传端点type: 'POST',data: formData,processData: false,contentType: false,success: function(result) {if (result.code == web_status.SUCCESS) {var urls = result.urls.split(','); // 根据后端定义的分隔符拆分URL字符串// 在编辑器中插入每个图片$.each(urls, function(index, url) {$('#messageContent').summernote('pasteHTML', '<div style="width: 320px; height: 240px;"> <video src="' + url + '" controls="controls"></video></div>');});} else {$.modal.alertError(result.msg);}},error: function(xhr, status, error) {// 处理上传错误$.modal.alertWarning("视频上传失败。");}});}});// 触发文件选择器input.click();}});return button.render();}},lang: 'zh-CN',dialogsInBody: true,callbacks: {onChange: function(contents, $edittable) {$("input[name='" + this.id + "']").val(contents);},onImageUpload: function(files) {var formData = new FormData();// 遍历文件列表，并将它们添加到FormData对象中$.each(files, function(index, file) {formData.append("files", file);});var obj = this;$.ajax({type: "post",url: ctx + "common/uploads",data: formData,cache: false,contentType: false,processData: false,dataType: 'json',success: function(result) {if (result.code == web_status.SUCCESS) {var urls = result.urls.split(','); // 根据后端定义的分隔符拆分URL字符串// 在编辑器中插入每个图片$.each(urls, function(index, url) {$('#' + obj.id).summernote('insertImage', url);});} else {$.modal.alertError(result.msg);}},error: function(error) {$.modal.alertWarning("图片上传失败。");}});}}});
});

后端Java代码

就是若依的通用上传请求（多个）代码

	/*** 通用上传请求（多个）*/@PostMapping("/uploads")@ResponseBodypublic AjaxResult uploadFiles(List<MultipartFile> files) throws Exception{try{// 上传文件路径String filePath = RuoYiConfig.getUploadPath();List<String> urls = new ArrayList<String>();List<String> fileNames = new ArrayList<String>();List<String> newFileNames = new ArrayList<String>();List<String> originalFilenames = new ArrayList<String>();for (MultipartFile file : files){// 上传并返回新文件名称String fileName = FileUploadUtils.upload(filePath, file);String url = serverConfig.getUrl() + fileName;urls.add(url);fileNames.add(fileName);newFileNames.add(FileUtils.getName(fileName));originalFilenames.add(file.getOriginalFilename());}AjaxResult ajax = AjaxResult.success();ajax.put("urls", StringUtils.join(urls, FILE_DELIMETER));ajax.put("fileNames", StringUtils.join(fileNames, FILE_DELIMETER));ajax.put("newFileNames", StringUtils.join(newFileNames, FILE_DELIMETER));ajax.put("originalFilenames", StringUtils.join(originalFilenames, FILE_DELIMETER));return ajax;}catch (Exception e){return AjaxResult.error(e.getMessage());}}