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")
@ResponseBody
public 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());
}
}