百度ueditor富⽂本--图⽚保存路径的配置以及上传到远程服务器
我们在上篇⽂章中学习了上传图⽚的配置:
百度ueditor富⽂本--配置图⽚上传
在⽂章的最后讲到 ueditor 默认设置的保存图⽚的路径是相对路径，项⽬相关的。
保存的图⽚会放在tomcat的webapp⽬录下的项⽬⽂件夹中。
F:\tomcat7\webapps\ROOT
这样的配置会导致重启 tomcat后保存的图⽚丢失。
解决⽅法⼀修改图⽚保存路径在tomcat的webapp中项⽬之外
修改了config.json中的imagePathFormat参数重新设置图⽚保存路径，⽐如：
"imagePathFormat": "/../temp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径，可以⾃定义保存路径和⽂件名格式 */
我们这⾥在原路径上加了/../temp。
意思是项⽬路径ROOT⾥的的上⼀级路径，也就是路径设置为项⽬之外，webapp中。
如图:
F:\tomcat7\webapps\temp\ueditor\jsp\upload\image\20170825
需要注意的是:
⼀、图⽚保存路径在项⽬之外最好先新建好⽂件夹，不然第⼀次上传图⽚时创建⽬录速度会⽐较慢，会导致⾸张图⽚回调不到图⽚404。
图⽚保存的路径最好在tomcat的webapp⽂件夹中，这样我们才能访问到图⽚。
如果图⽚不在Webapp⽬录下的，需要做做映射才能访问图⽚，回调显⽰图⽚才能成功。
UEditor后端保存图⽚到⽬标位置之后，返回前端⼀个url。前端根据url，去取图⽚，取不到。
如果想把图⽚存储到⾮Webapp等硬盘⽬录，⽐如C:/img，需要⼿动修改controller.jsp的rootPath
[java] view plain copy print?
1. <%@ page language="java" contentType="text/html; charset=UTF-8"
2. import="com.baidu.ueditor.ActionEnter"
3. pageEncoding="UTF-8"%>
4. <%@ page trimDirectiveWhitespaces="true" %>
5. <%
6.
7. request.setCharacterEncoding( "utf-8" );
8. response.setHeader("Content-Type" , "text/html");
8. response.setHeader("Content-Type" , "text/html");
9.
10. //String rootPath = RealPath( "/" );
11. String rootPath = "c:/img";
12. System.out.print(rootPath);
13. out.write( new ActionEnter( request, rootPath ).exec() );
14.
15. %>
图⽚保存在项⽬的外⾯，⽐如C:/img，前端请求不可能直接访问到，需要做映射。linux系统的话⼀般需要做静态资源服务器域名访问。
解决⽅法⼆把图⽚上传到远程服务器上
在良好的web架构中，图⽚和web站点是分开的，放在不同的服务器上，实现静态资源分离。
也就是说我们的web 在使⽤ueditor富⽂本编辑器时上传插件上传的图⽚也应该上传到图⽚资源服务器中。
也就是要上传到远程服务器上，甚⾄可能要实现跨域上传。
查询了很多资料之后发现主要有两种实现⽅式:
推荐⽅式⼆，⽅式⼀实现起来⽐较复杂，需要⼀定的理解。
⽅式⼀重写接收图⽚的controller以及上传组件的调⽤
默认使⽤的controller.jsp是⼀种很简单的操作，就是把⽂件流保存到指定路径下。
如果我们要实现跨域上传图⽚到远程服务器的话必须重写这个controller，接收⽂件流之后上传到远程服务器，返回图⽚地址。
关于接收⽂件流上传到远程服务器的代码思路可以参考:
java上传⽂件到远程服务器(⼀)---HttpURLConnection⽅式
java上传⽂件到远程服务器(⼆)---HttpClient⽅式
java上传⽂件到远程服务器七⽜云
JSP页⾯修改
JSP页⾯中在初始化UE的JS中需要重新设置⼀下每个插件的调⽤事件，如下:
[java] view plain copy print?
1. // 初始化⽂本编辑器
2. $(".ueditorFlag").each(function() {
3. var id = this.id;
4. var ue = UE.getEditor(id, {
5. pasteplain: true, /* 纯⽂本粘贴 */
6. autoHeightEnabled:false,/* 启⽤右侧滚轮，默认是true⾃动长⾼模式*/
7. toolbars: [[
8. 'fullscreen', 'source', '|', 'undo', 'redo', '|',
9. 'bold', 'italic', 'underline',
10. 'removeformat', '|',
11. 'insertorderedlist', 'insertunorderedlist',
12. 'indent', '|', 'justifyleft', 'justifycenter',
13. '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', 'insertimage',
13. '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', 'insertimage',
14. '|', 'link', 'unlink'
15. ]]
16. });
17.
18. UE.Editor.prototype._bkGetActionUrl=UE.ActionUrl;
19. UE.ActionUrl=function(action){
20. if (action == 'uploadimage' ||action== 'uploadscrawl' || action == 'uploadimage') {
21. return "${basePath}/upload";
22. } else if(action =='uploadvideo') {
23. return "${basePath}/upload";
24. } else if(action == 'listimage'){
25. return "${basePath}/download";
26. } else{
27. return this._bkGetActionUrl.call(this, action);
28. }
29. }
30.
31. console.log('ueditor for ' + id + ' init.');
32. });
简单介绍：
UE.Editor.prototype._bkGetActionUrl=UE.ActionUrl; 是⽤来获取Action的，照写就⾏，然后就是下⾯的 UE.ActionUrl=function(action){....} 这⾥⾯的if语句Controller。
这⾥的action也就是我们选中的插件的动作，对应的名称可以在 config.json中查。
如图:
新建⼀个接收图⽚上传到远程服务器的controller
[java] view plain copy print?
1. /**
2. * 上传图⽚
3. *
4. * @return
5. * @throws IOException
6. * @throws IllegalStateException
7. * @RequestParam("upload")MultipartFile file,
8. */
9. @RequestMapping(value ="upload")
10. public String uploadImage(
11. HttpServletRequest request,HttpServletResponse response)
12. throws IllegalStateException, IOException{
13. response.setContentType("text/html;charset=UTF-8");
14. ReturnUploadImage rui = null;//这个是UEditor需要的返回值内容，UEditor要的返回值需要封装成Json格式
15. // 转型为MultipartHttpRequest：
16. MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest) request;
17. // 获得⽂件：
18. MultipartFile file =File("upfile"); //UEditor传到后台的是这个upfile，其他的⽂件上传，应该也差不多是这个，还没去研究，断点⼀下就知道了
19. // 写⼊⽂件
20. File imageFile =newFile("/"+Uuid()+".jpg");
20. File imageFile =newFile("/"+Uuid()+".jpg");
21. ansferTo(imageFile);
22. //现在获取了File接下来要上传到OSS上
23. if(imageFile!=null){
24. rui = new ReturnUploadImage();
25. rui.Name());//这⾥需要设置⽂件名称如：xxx.jpg
26. rui.Name());//这⾥需要设置⽂件名称如：xxx.jpg
27. // 判断⽂件是否为图⽚⽂件
28. String r =ImageUtils.fileDetermine(imageFile, 3 * 1024);
29. if (!StringUtils.isNotEmpty(r)) {
30. // 上传⽂件(这⾥⽂件类型，要根据实际上传的类型去做，暂时是直接设置了.jpg，并且先保存到磁盘，这样对磁盘⽐较伤，每次上传都要先保存到磁盘，然后再删除)
31. ResultInfo resultInfo = OSSObjTools.uploadObject(imageFile,
32. "subWebPublicNotice");//这⾥是⾃⼰封装的OSS，上传到OSS上⾯
33. // 判断如果返回结果不为空并且MD5返回值⽐较结果正确，就设置⽂件路径保存到数据库
34. if (resultInfo != null
35. &&Tag().equalsIgnoreCase(
36. MD5Tools.file2MD5(imageFile))) {
37. rui.setState("SUCCESS");//这⾥上传成功的话⼀定要设置⼤写的 SUCCESS，失败还没测试，猜应该是FAIL，回头再去官⽹
38. rui.setUrl(CommonTools.catchUrlPath(PubParam.BUCKET_NAME,
39. PubParam.Mark_ShenZhen) +FilePath());//这⾥是设置返回给UEditor的图⽚地址
40. }
41. }
42. // 判断临时存放的⽂件是否存在
43. if (ists()) {
44. // 删除临时存放的⽂件
45. imageFile.delete();
46. }
47. }
48. String result = JSONString(rui);//这边就是为了返回给UEditor做的格式转换
49. Writer().write(result);
50. return null;
51. }
⼤家可以在这个步骤上进⾏修改使⽤我们前⾯提供的三种⽅式修改图⽚上传。
上传完成之后返回图⽚的地址即可。
需要注意的是这⾥返回的图⽚地址使⽤json格式，格式必须符合 ueditor的格式规范，否则插件⽆法识别回显图⽚。
返回给UEditor的参数
这⾥你应该参考fex.baidu/ueditor/#dev-request_specification
官⽅⽂档⾥⾯的后端请求参数-请求规范，
官⽅有介绍了，返回参数的格式，格式中json的key就是对应了类ReturnUploadImage⾥⾯的属性。
转换后格式应该是这样的，要严格按照⽂档上⾯的格式
{"original":"5dfcfea3e3b442bda3972053266c3bd3.jpg","state":"SUCCESS","title":"5dfcfea3e3b442bda3972053266c3bd3.jpg","url":"321/mmmm/xxxModuleName/201509注：不同的⽂件上传，返回的属性不⼀样
=======================ReturnUploadImageStart============================================
public classReturnUploadImage {
private String state;//上传状态SUCCESS ⼀定要⼤写
private String url;//上传地址
private String title;//图⽚名称demo.jpg
private String original;//图⽚名称demo.jpg
....getter &
}
=======================ReturnUploadImage End==============================================
这⾥官⽅⽂档也说的很清楚，对应 config、uploadimage、uploadscrawl、uploadvideo、都有各⾃的格式
⽂档⾥⾯这些对应的就是xxxxActionName
官⽅⽂档截图：
⽅式⼆调⽤远程服务器上的controller.jsp
图⽚上传时调⽤的接⼝是在fig.js中设置的:
[java] view plain copy print?
js获取json的key和value1. // 服务器统⼀请求接⼝路径
2. , serverUrl: URL + "jsp/controller.jsp"
我们就想着能不能直接把这个改成远程服务器上的 controller.jsp就可以把图⽚上传到远程服务器上了。
答案是可以。
但是需要做⼀些处理。
环境布置
因为我们使⽤的java版本的ueditor，controller.jsp运⾏接收图⽚是需要java环境的，所以我们⾸先在远程服务器上部署⼀个tomcat。然后在tomcat的webapp⽬录中新建⼀个ROOT⽬录。
把config.json和controller.jsp放⼊其中。
启动tomcat即可。
如图:
config.json
内容如下:
[java] view plain copy print?
1. /* 前后端通信相关的配置，注释只允许使⽤多⾏⽅式 */
2. {
3. /* 服务器存储配置 */
4. "saveRootPath": "/data/nginx/static", /* ⽂件保存的根路径 */
5.
6. /* 上传图⽚配置项 */
7. "imageActionName": "uploadimage", /* 执⾏上传图⽚的action名称 */
8. "imageFieldName": "upfile", /* 提交的图⽚表单名称 */
9. "imageMaxSize": 2048000, /* 上传⼤⼩限制，单位B */
10. "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图⽚格式显⽰ */
11. "imageCompressEnable": true, /* 是否压缩图⽚，默认是true */
12. "imageCompressBorder": 1600, /* 图⽚压缩最长边限制 */
13. "imageInsertAlign": "none", /* 插⼊的图⽚浮动⽅式 */
14. "imageUrlPrefix": "upload.23cube", /* 图⽚访问路径前缀 */
15. "imagePathFormat": "/editor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径，可以⾃定义保存路径和⽂件名格式 */
16. /* {filename} 会替换成原⽂件名，配置这项需要注意中⽂乱码问题 */
17. /* {rand:6} 会替换成随机数，后⾯的数字是随机数的位数 */
18. /* {time} 会替换成时间戳 */
19. /* {yyyy} 会替换成四位年份 */
20. /* {yy} 会替换成两位年份 */
21. /* {mm} 会替换成两位⽉份 */
22. /* {dd} 会替换成两位⽇期 */
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论