Spring Boot集成百度Ueditor
遇到的问题:
1.将ueditor加入/static目录下,能正常显示,但是出现“请求后台配置项http错误,上传功能将不能正常使用!”(解决在下面,都是自定义上传的,如果需要官方的示例,我也无能为力,没搞出来........)
2.解决问题一后,出现“上传失败”(解决在下面,同上)
默认情况下上传图片时的请求过程:
首先,初始化Ueditor插件时,在ueditor.all.js的大约8200行左右有一个请求配置文件内容的request。请求的是ueditor.config.js中serviceUrl的服务器路径,即请求的是/jsp/controller.jsp文件。他返回的内容是/jsp目录下的config.json文件的内容。如果这里请求错误,前端控制台会打印“请求后台配置项http错误,上传功能将不能正常使用!”的错误。
其次,当我们上传图片时,图片的请求路径、保存的地址都在/jsp目录的下config.json文件中。请求成功时将返回类似如下json数据
{
"state": "SUCCESS",
"url": "upload/demo.jpg",
"title": "demo.jpg",
"original": "demo.jpg"
}
这就为我们自定义上传返回提供了思路,也就是下面的步骤。
第一步:下载Ueditor,地址:http://ueditor.baidu.com/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-jsp 完成后将文件夹名改为ueditor,方便一些,然后复制此文件夹到Spring Boot项目的/resources/static目录下。
第二步:修改文件上传配置路径
打开ueditor目录下的ueditor.config.js文件,修改serverUrl路径,未修改情况下,将请求ueditor/jsp/controller.jsp。他返回当前目录的conf.json的内容。我们要模拟出
此内容。
由原来的
serverUrl: URL+"jsp/controller.jsp"
改为我们自己的
serverUrl: "http://localhost:8080/ueditor/"
然后编写comtroller处理请求,后台ueditor如下:(我删除了用不到的视频、涂鸦什么的,只留下了图片的)将/jsp/config.json中的内容复制到字符串中,然后返回即可,注意的是先写String s="";然后在双引号内粘贴,这样会自动将粘贴板中的双引号加入反斜杠。
@RequestMapping(value = "/ueditor")
@ResponseBody
public String ueditor(HttpServletRequest request, HttpServletResponse response) { String s = "{\n"+
" \"imageActionName\": \"uploadimage\",\n" +
" \"imageFieldName\": \"file\", \n" +
" \"imageMaxSize\": 2048000, \n" +
" \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n" +
" \"imageCompressEnable\": true, \n" +
" \"imageCompressBorder\": 1600, \n" +
" \"imageInsertAlign\": \"none\", \n" +
" \"imageUrlPrefix\": \"\",\n" +
" \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\" }";
return s; }
这样我们请求过程的第一步完成,接下来我们需要自定义上传图片的处理逻辑。首先,按照官方文档的写法http://fex.baidu.com/ueditor/#qa-customurl,要在使用插件的index.html中的修改action Url,方法如下
<script type="text/javascript">
var ue = UE.getEditor('container');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return 'http://localhost:8080/imgUpdate'; //在这里返回我们实际的上传图片地址
} else {
return this._bkGetActionUrl.call(this, action);
}
}
</script>
其后台的imgUpdate如下:
@RequestMapping(value = "/imgUpdate")
@ResponseBody
public String imgUpdate(MultipartFile file) {
if (file.isEmpty()) {
return "error";
}
// 获取文件名
String fileName = file.getOriginalFilename();
// 获取文件的后缀名
String suffixName = fileName.substring(fileName.lastIndexOf("."));
// 这里我使用随机字符串来重新命名图片
fileName = Calendar.getInstance().getTimeInMillis() + Randoms.getRandomStringLower(4) + suffixName;
// 这里的路径为Nginx的代理路径,这里是/data/images/xxx.png
File dest = new File(ConstantL.IMAGE_UPDATE_PATH + fileName);
// 检测是否存在目录
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
}
try {
file.transferTo(dest);
//url的值为图片的实际访问地址 这里我用了Nginx代理,访问的路径是http://localhost/xxx.png
String config = "{\"state\": \"SUCCESS\"," +
"\"url\": \"" + ConstantL.BASE_URL + fileName + "\"," +
"\"title\": \"" + fileName + "\"," +
"\"original\": \"" + fileName + "\"}";
return config;
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return "error";
}
这里返回值是参照文档中的http://fex.baidu.com/ueditor/#dev-request_specification.需要注意的是,mgUpdate方法里面的参数名称一定要与ueditor方法中字符串s中的imageFieldName值相同,都是file,不然会报空指针异常。
这样,应该就可以上传了。
最新文章
- PHP XML和数组互相转换
- 比较两个数据库表table结构不同之处
- 注意在<;s:if test=";#session.user.power==0";>;中不能用 <;s:if test=$sessionScope.user.power==0";>;
- 用distinct在MySQL中查询多条不重复记录值[转]
- windows远程控制
- Caesar&#39;s Legions(三维dp)
- ZeroCopyLiteralByteString cannot access superclass
- (转)TCP协议那些事
- 关于部分应用无法向POJ提交代码的解决方案
- Sublime 常用快捷键
- 通过JiaThis API接口自定义分享功能按钮实现分享功能本地化
- 三.SQL语句实例
- 做移动端电子签名发现canvas的 一些坑
- AutoCAD批量导出点坐标
- Hello2实例的分析
- p57商环
- IO密集型和计算密集型
- windows下sublime通过sftp扩展上传文件到linux服务器上
- docker学习实践之路[第一站]环境安装
- Disk Genius 彻底清理硬盘空闲