spring boot 前后端分离百度编辑器上传图片
简介
百度编辑器前后端分离上传图片时候 会出现无法上传图片以及图片上传后成功但是返回却失败 不进行展示图片。
后台配置
- 新建对应的一个方法 另外新建一个config.json文件 文件内容如下 http://xxxxxxxxxx.aliyuncs.com地址是阿里云oss地址 可以换成前台的自己对应地址
{
/* 上传图片配置项 */
"imageActionName": "file", /* 执行上传图片的action名称 */
"imageFieldName": "upfile", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制，单位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */
"imageInsertAlign": "none", /* 插入的图片浮动方式 */
"imageUrlPrefix": "http://xxxxxxxxxx.aliyuncs.com", /* 图片访问路径前缀 */
"imagePathFormat": "/install/images/{yyyy}-{mm}-{dd}/{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
/* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
/* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
/* {time} 会替换成时间戳 */
/* {yyyy} 会替换成四位年份 */
/* {yy} 会替换成两位年份 */
/* {mm} 会替换成两位月份 */
/* {dd} 会替换成两位日期 */
/* {hh} 会替换成两位小时 */
/* {ii} 会替换成两位分钟 */
/* {ss} 会替换成两位秒 */
/* 非法字符 \ : * ? " < > | */
/* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
/* 涂鸦图片上传配置项 */
"scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */
"scrawlFieldName": "upfile", /* 提交的图片表单名称 */
"scrawlPathFormat": "/upload/fileUpload", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"scrawlMaxSize": 2048000, /* 上传大小限制，单位B */
"scrawlUrlPrefix": "http://xxxxxxxxxx.aliyuncs.com", /* 图片访问路径前缀 */
"scrawlInsertAlign": "none",
/* 截图工具上传 */
"snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */
"snapscreenPathFormat": "/upload/fileUpload", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"snapscreenUrlPrefix": "http://xsw-xlb.oss-cn-shanghai.aliyuncs.com", /* 图片访问路径前缀 */
"snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */
/* 抓取远程图片配置 */
"catcherLocalDomain": ["localhost", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */
"catcherFieldName": "source", /* 提交的图片列表表单名称 */
"catcherPathFormat": "http://xxxxxxxxxx.aliyuncs.com", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"catcherUrlPrefix": "", /* 图片访问路径前缀 */
"catcherMaxSize": 2048000, /* 上传大小限制，单位B */
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */
/* 上传视频配置 */
"videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
"videoFieldName": "upfile", /* 提交的视频表单名称 */
"videoPathFormat": "/upload/fileUploadVideo", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"videoUrlPrefix": "http://xxxxxxxxxx.aliyuncs.com", /* 视频访问路径前缀 */
"videoMaxSize": 102400000, /* 上传大小限制，单位B，默认100MB */
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */
/* 上传文件配置 */
"fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
"fileFieldName": "upfile", /* 提交的文件表单名称 */
"filePathFormat": "/upload/fileUpload", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"fileUrlPrefix": "http://xxxxxxxxxx.aliyuncs.com", /* 文件访问路径前缀 */
"fileMaxSize": 51200000, /* 上传大小限制，单位B，默认50MB */
"fileAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
], /* 上传文件格式显示 */
/* 列出指定目录下的图片 */
"imageManagerActionName": "listimage", /* 执行图片管理的action名称 */
"imageManagerListPath": "/upload/ueditor/image/", /* 指定要列出图片的目录 */
"imageManagerListSize": 20, /* 每次列出文件数量 */
"imageManagerUrlPrefix": "http://xxxxxxxxxx.aliyuncs.com", /* 图片访问路径前缀 */
"imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */
/* 列出指定目录下的文件 */
"fileManagerActionName": "listfile", /* 执行文件管理的action名称 */
"fileManagerListPath": "/upload/ueditor/file/", /* 指定要列出文件的目录 */
"fileManagerUrlPrefix": "http://xxxxxxxxxx.aliyuncs.com", /* 文件访问路径前缀 */
"fileManagerListSize": 20, /* 每次列出文件数量 */
"fileManagerAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
] /* 列出的文件类型 */
- 在后台新建对应的方法action方法
/**
* 富文本配置文件获取
* @param request
* @return
*/
@RequestMapping("/config")
public void config(HttpServletRequest request, HttpServletResponse response,@RequestParam("action") String action,MultipartFile upfile) throws Exception {
response.setContentType("application/json");
String rootPath = request.getSession().getServletContext().getRealPath("/");
try {
if(action.equals("file")){
Map<String,Object> parm = new HashMap<>();
String fileName = upfile.getOriginalFilename();
String replace = String.valueOf(UUID.randomUUID()).replace("-", "");
replace = replace.substring(0, 8) +"."+ fileName.substring(fileName.lastIndexOf(".") + 1);
String newUrl = fileService.fileUpfileLast(upfile,replace);
PrintWriter writer = response.getWriter();
String json =
"{ \"state\": \"SUCCESS\",\"url\": \""+newUrl +"\",\"title\": \""+
replace+"\",\"original\": \""+replace+"\"}";
writer.write(json);
writer.flush();
writer.close();
} else if(action.equals("uploadimage")){ //多图上传
String fileName = upfile.getOriginalFilename();
String replace = String.valueOf(UUID.randomUUID()).replace("-", "");
replace = replace.substring(0, 8) +"."+ fileName.substring(fileName.lastIndexOf(".") + 1);
String newUrl = fileService.fileUpfileLast(upfile,replace);
newUrl = "http://xxxxxxxxxx.aliyuncs.com" + newUrl;
PrintWriter writer = response.getWriter();
String json ="{ \"state\": \"SUCCESS\",\"url\": \""+newUrl +"\",\"title\": \""+
replace+"\",\"original\": \""+replace+"\"}";
writer.write(json);
writer.flush();
writer.close();
}else { //刚开始获取对应的配置信息 读取config.json
String exec = new ActionEnter(request, rootPath).exec();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
3.修改对应百度编辑器的后台代码
ConfigManager 文件 getConfigPath 方法注释原有的 添加classpath下的config.json路径
return this.getClass().getClassLoader().getResource(“config.json”).toURI().getPath();
- 前台分离项目配置 是一个Javaweb的项目 vue或者其他可参考更改对应js
项目运行起来点击编辑器默认的图片会上传到本地 这时候我们需要修改对应的js
地址是本地的项目中的 这时候修改修改对应js 让他获取到config.json ueditor.config.js中的信息
修改 ueditor.config.js 中serverUrl 更改成服务端地址
- 单图上传 成功后 提示失败 这时候需要修改ueditor.all.js
搜索下列文字domUtils.on(iframe, ‘load’, callback) 找到后注释
action 方法 uploadimage
// domUtils.on(iframe, 'load', callback);
// form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?':'&') + params);
// form.submit();
var formdata = new FormData(form);
var arr,reg=new RegExp("(^| )_token=([^;]*)(;|$)");
var myForm = document.getElementById("myForm");
var xhr= new XMLHttpRequest();
xhr.open("POST", me.getOpt('serverUrl')+'?action=uploadimage', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4)
if ((xhr.status >=200 && xhr.status < 300) || xhr.status == 304)
alert(xhr.responseText);
}
xhr.send(formdata);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
console.log(xhr.responseText);
var response = JSON.parse(xhr.responseText);
if(response.state =='SUCCESS'){
loader = me.document.getElementById(loadingId);
loader.setAttribute('src', response.url);
loader.setAttribute('_src', response.url);
loader.setAttribute('title', response.title || '');
loader.setAttribute('alt', response.title || '');
loader.removeAttribute('id');
domUtils.removeClasses(loader, 'loadingclass');
}else
{
showErrorLoader && showErrorLoader(response.state);
}
}
}
通过上述就已经完成配置了 后台代码一定要按照上面返回与前台所需参数进行对应 后台百度编辑器相关文件 后台百度代码编辑器文件