百度ueditor富文本--图片保存路径的配置以及上传到远程服务器

时间:2024-05-22 08:41:54

我们在上篇文章中学习了  上传图片的配置:

百度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中。

如图:

百度ueditor富文本--图片保存路径的配置以及上传到远程服务器

F:\tomcat7\webapps\temp\ueditor\jsp\upload\image\20170825

百度ueditor富文本--图片保存路径的配置以及上传到远程服务器



需要注意的是:

一、图片保存路径在项目之外最好先新建好文件夹,不然第一次上传图片时创建目录速度会比较慢,会导致首张图片回调找不到图片404。

百度ueditor富文本--图片保存路径的配置以及上传到远程服务器


图片保存的路径最好在tomcat的webapp文件夹中,这样我们才能访问到图片。

如果图片不在Webapp目录下的,需要做做映射才能访问图片,回调显示图片才能成功。

UEditor后端保存图片到目标位置之后,返回前端一个url。前端根据url,去取图片,取不到。

如果想把图片存储到 非Webapp等硬盘目录,比如C:/img,需要手动修改controller.jsp的rootPath

[java] view plain copy
  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");  
  9.       
  10.     //String rootPath = application.getRealPath( "/" );  
  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
  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',    
  14.           '|''link''unlink'    
  15.       ]]    
  16.     });    
  17.       
  18.     UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;  
  19.     UE.Editor.prototype.getActionUrl=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.Editor.prototype.getActionUrl; 是用来获取Action的,照写就行,然后就是下面的 UE.Editor.prototype.getActionUrl=function(action){....}  这里面的if语句,就是用来设置自定义action路由的,这里叫Controller。

这里的action也就是 我们选中的 插件的 动作,对应的名称可以在 config.json中查找。

如图:

百度ueditor富文本--图片保存路径的配置以及上传到远程服务器

新建一个接收图片上传到远程服务器的controller

[java] view plain copy
  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 =multipartRequest.getFile("upfile"); //UEditor传到后台的是这个upfile,其他的文件上传,应该也差不多是这个,还没去研究,断点一下就知道了  
  19. // 写入文件  
  20. File imageFile =newFile("/"+Uuid()+".jpg");  
  21. file.transferTo(imageFile);  
  22. //现在获取了File接下来要上传到OSS上  
  23. if(imageFile!=null){  
  24. rui = new ReturnUploadImage();  
  25. rui.setTitle(imageFile.getName());//这里需要设置文件名称如:xxx.jpg  
  26. rui.setOriginal(imageFile.getName());//这里需要设置文件名称如: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. &&resultInfo.geteTag().equalsIgnoreCase(  
  36. MD5Tools.file2MD5(imageFile))) {  
  37. rui.setState("SUCCESS");//这里上传成功的话一定要设置大写的 SUCCESS,失败还没测试,猜应该是FAIL,回头再去官网找找  
  38. rui.setUrl(CommonTools.catchUrlPath(PubParam.BUCKET_NAME,  
  39. PubParam.Mark_ShenZhen) +resultInfo.getFilePath());//这里是设置返回给UEditor的图片地址  
  40. }  
  41. }  
  42. // 判断临时存放的文件是否存在  
  43. if (imageFile.exists()) {  
  44. // 删除临时存放的文件  
  45. imageFile.delete();  
  46. }  
  47. }  
  48. String result = JSON.toJSONString(rui);//这边就是为了返回给UEditor做的格式转换  
  49. response.getWriter().write(result);  
  50. return null;  
  51. }  


大家可以在这个步骤上进行 修改 使用 我们前面提供的三种方式 修改 图片上传。


上传完成之后 返回图片的地址 即可。

需要注意的是  这里返回的 图片地址使用json格式,格式必须 符合 ueditor的格式规范,否则 插件无法识别 回显图片。



返回给UEditor的参数


这里你应该参考http://fex.baidu.com/ueditor/#dev-request_specification
官方文档里面的 后端请求参数-请求规范,
官方有介绍了,返回参数的格式,格式中json的key就是对应了类ReturnUploadImage里面的属性。
转换后格式应该是这样的,要严格按照文档上面的格式
{"original":"5dfcfea3e3b442bda3972053266c3bd3.jpg","state":"SUCCESS","title":"5dfcfea3e3b442bda3972053266c3bd3.jpg","url":"http://www.xxxxx321.com/mmmm/xxxModuleName/20150922/5dfcfea3e3b442bda3972053266c3bd3.jpg"}
注:不同的文件上传,返回的属性不一样
=======================ReturnUploadImageStart============================================
public classReturnUploadImage {
private String state;//上传状态SUCCESS 一定要大写
private String url;//上传地址
private String title;//图片名称demo.jpg
private String original;//图片名称demo.jpg
....getter & setter...
}
=======================ReturnUploadImage End==============================================
这里官方文档也说的很清楚,对应 config、uploadimage、uploadscrawl、uploadvideo、uploadfile....都有各自的格式
文档里面这些对应的就是xxxxActionName
官方文档截图:

百度ueditor富文本--图片保存路径的配置以及上传到远程服务器


方式二  调用远程服务器上的controller.jsp


图片上传时调用的接口是在ueditor.config.js中设置的:

[java] view plain copy
  1. // 服务器统一请求接口路径  
  2.     , serverUrl: URL + "jsp/controller.jsp"  


我们就想着  能不能直接把这个 改成 远程服务器上的 controller.jsp就可以把图片上传到远程服务器上了。


答案是  可以。


但是 需要做一些处理。


环境布置


因为我们使用的java版本的ueditor,controller.jsp运行接收图片是需要java环境的,所以我们首先在远程服务器上部署一个tomcat。

然后在tomcat的webapp目录中新建一个ROOT目录。

把config.json和controller.jsp放入其中。

启动tomcat即可。

如图:

百度ueditor富文本--图片保存路径的配置以及上传到远程服务器

config.json

内容如下:

[java] view plain copy
  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""http://upload.23cube.com"/* 图片访问路径前缀 */  
  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} 会替换成两位日期 */  
  23.                                 /* {hh} 会替换成两位小时 */  
  24.                                 /* {ii} 会替换成两位分钟 */  
  25.                                 /* {ss} 会替换成两位秒 */  
  26.                                 /* 非法字符 \ : * ? " < > | */  
  27.                                 /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */  
  28.   
  29.     /* 涂鸦图片上传配置项 */  
  30.     "scrawlActionName""uploadscrawl"/* 执行上传涂鸦的action名称 */  
  31.     "scrawlFieldName""upfile"/* 提交的图片表单名称 */  
  32.     "scrawlPathFormat""/editor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"/* 上传保存路径,可以自定义保存路径和文件名格式 */  
  33.     "scrawlMaxSize"2048000/* 上传大小限制,单位B */  
  34.     "scrawlUrlPrefix""http://upload.23cube.com"/* 图片访问路径前缀 */  
  35.     "scrawlInsertAlign""none",  
  36.   
  37.     /* 截图工具上传 */  
  38.     "snapscreenActionName""uploadimage"/* 执行上传截图的action名称 */  
  39.     "snapscreenPathFormat""/editor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"/* 上传保存路径,可以自定义保存路径和文件名格式 */  
  40.     "snapscreenUrlPrefix""http://upload.23cube.com"/* 图片访问路径前缀 */  
  41.     "snapscreenInsertAlign""none"/* 插入的图片浮动方式 */  
  42.   
  43.     /* 抓取远程图片配置 */  
  44.     "catcherLocalDomain": ["127.0.0.1""localhost""img.baidu.com"],  
  45.     "catcherActionName""catchimage"/* 执行抓取远程图片的action名称 */  
  46.     "catcherFieldName""source"/* 提交的图片列表表单名称 */  
  47.     "catcherPathFormat""/editor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"/* 上传保存路径,可以自定义保存路径和文件名格式 */  
  48.     "catcherUrlPrefix""http://upload.23cube.com"/* 图片访问路径前缀 */  
  49.     "catcherMaxSize"2048000/* 上传大小限制,单位B */  
  50.     "catcherAllowFiles": [".png"".jpg"".jpeg"".gif"".bmp"], /* 抓取图片格式显示 */  
  51.   
  52.     /* 上传视频配置 */  
  53.     "videoActionName""uploadvideo"/* 执行上传视频的action名称 */  
  54.     "videoFieldName""upfile"/* 提交的视频表单名称 */  
  55.     "videoPathFormat""/editor/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}"/* 上传保存路径,可以自定义保存路径和文件名格式 */  
  56.     "videoUrlPrefix""http://upload.23cube.com"/* 视频访问路径前缀 */  
  57.     "videoMaxSize"102400000/* 上传大小限制,单位B,默认100MB */  
  58.     "videoAllowFiles": [  
  59.         ".flv"".swf"".mkv"".avi"".rm"".rmvb"".mpeg"".mpg",  
  60.         ".ogg"".ogv"".mov"".wmv"".mp4"".webm"".mp3"".wav"".mid"], /* 上传视频格式显示 */  
  61.   
  62.     /* 上传文件配置 */  
  63.     "fileActionName""uploadfile"/* controller里,执行上传视频的action名称 */  
  64.     "fileFieldName""upfile"/* 提交的文件表单名称 */  
  65.     "filePathFormat""/editor/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}"/* 上传保存路径,可以自定义保存路径和文件名格式 */  
  66.     "fileUrlPrefix""http://upload.23cube.com"/* 文件访问路径前缀 */  
  67.     "fileMaxSize"51200000/* 上传大小限制,单位B,默认50MB */  
  68.     "fileAllowFiles": [  
  69.         ".png"".jpg"".jpeg"".gif"".bmp",  
  70.         ".flv"".swf"".mkv"".avi"".rm"".rmvb"".mpeg"".mpg",  
  71.         ".ogg"".ogv"".mov"".wmv"".mp4"".webm"".mp3"".wav"".mid",  
  72.         ".rar"".zip"".tar"".gz"".7z"".bz2"".cab"".iso",  
  73.         ".doc"".docx"".xls"".xlsx"".ppt"".pptx"".pdf"".txt"".md"".xml"  
  74.     ], /* 上传文件格式显示 */  
  75.   
  76.     /* 列出指定目录下的图片 */  
  77.     "imageManagerActionName""listimage"/* 执行图片管理的action名称 */  
  78.     "imageManagerListPath""/editor/upload/image/"/* 指定要列出图片的目录 */  
  79.     "imageManagerListSize"20/* 每次列出文件数量 */  
  80.     "imageManagerUrlPrefix""http://upload.23cube.com"/* 图片访问路径前缀 */  
  81.     "imageManagerInsertAlign""none"/* 插入的图片浮动方式 */  
  82.     "imageManagerAllowFiles": [".png"".jpg"".jpeg"".gif"".bmp"], /* 列出的文件类型 */  
  83.   
  84.     /* 列出指定目录下的文件 */  
  85.     "fileManagerActionName""listfile"/* 执行文件管理的action名称 */  
  86.     "fileManagerListPath""/editor/upload/file/"/* 指定要列出文件的目录 */  
  87.     "fileManagerUrlPrefix""http://upload.23cube.com"/* 文件访问路径前缀 */  
  88.     "fileManagerListSize"20/* 每次列出文件数量 */  
  89.     "fileManagerAllowFiles": [  
  90.         ".png"".jpg"".jpeg"".gif"".bmp",  
  91.         ".flv"".swf"".mkv"".avi"".rm"".rmvb"".mpeg"".mpg",  
  92.         ".ogg"".ogv"".mov"".wmv"".mp4"".webm"".mp3"".wav"".mid",  
  93.         ".rar"".zip"".tar"".gz"".7z"".bz2"".cab"".iso",  
  94.         ".doc"".docx"".xls"".xlsx"".ppt"".pptx"".pdf"".txt"".md"".xml"  
  95.     ] /* 列出的文件类型 */  
  96.   
  97. }  

saveRootPath 和  imagePathFormat 共同决定了 存储的路径 /data/nginx/static/editor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}。




controller.jsp

代码为:

[java] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" import="com.baidu.ueditor.ActionEnter" pageEncoding="UTF-8"%>  
  2. <%@ page trimDirectiveWhitespaces="true"%>  
  3. <%  
  4.     request.setCharacterEncoding("utf-8");  
  5.     response.setHeader("Content-Type""text/html");  
  6.     response.setHeader("Access-Control-Allow-Origin""http://localhost:8080");  
  7.     response.setHeader("Access-Control-Allow-Headers""X-Requested-With,X_Requested_With");  
  8.     String rootPath = application.getRealPath("/");  
  9.     out.write(new ActionEnter(request, rootPath).exec());  
  10. %>  


 response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
 response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With");

这两句是相对于原controller.jsp新增的。

主要是允许跨域传输。


http://localhost:8080需要修改成与自己web服务器所在的 ip或者域名一致。


我这里是 用本地来测试 所以设置成了http://localhost:8080。


如果不加这两句的话 会报跨域错误,类似于:

XMLHttpRequest cannot load http://d.com/controller.jsp?action=uploadimage&encode=utf-8. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://c.com' is therefore not allowed access.




启动tomcat后我们发现已经可以访问到 这个controller了。

我这里图片资源服务器是配置有域名的,如果域名是: test.123.com。

tomcat的端口是9003。

直接访问tomcat的端口显示如下:

百度ueditor富文本--图片保存路径的配置以及上传到远程服务器

如果没有域名的话 直接使用远程ip也可以。




那么 我们就可以在web中配置这个服务器接收接口了。

找到 web项目初始化ueditor使用的ueditor.confi.js。

修改如下:

[java] view plain copy
  1. , serverUrl: "http://test.123.com:9003/controller.jsp"  


如图:

百度ueditor富文本--图片保存路径的配置以及上传到远程服务器



到这里就配置完成了。


启动web项目,上传图片成功:

百度ueditor富文本--图片保存路径的配置以及上传到远程服务器



然后到 配置的保存图片路径/data/nginx/static/editor/upload/image中查看,成功保存:

百度ueditor富文本--图片保存路径的配置以及上传到远程服务器