我们在上篇文章中学习了 上传图片的配置:
百度ueditor富文本--配置图片上传
在文章的最后 讲到 ueditor 默认设置的 保存图片的 路径 是相对路径，项目相关的。
保存的图片会放在tomcat的webapp目录下的 项目 文件夹中。
F: omcat7webappsROOT
这样的配置 会 导致 重启 tomcat后 保存的 图片 丢失。
修改了config.json中的imagePathFormat参数重新设置图片保存路径，比如："imagePathFormat": "/https://blog.51cto.com/temp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
我们这里在原路径上加了/https://blog.51cto.com/temp。
意思是 项目路径ROOT里的的上一级路径，也就是 路径设置为项目之外，webapp中。
如图:
F: omcat7webapps emporjsp좊dimage20170825
需要注意的是:
一、图片保存路径在项目之外最好先新建好文件夹，不然第一次上传图片时创建目录速度会比较慢，会导致首张图片回调找不到图片404。
图片保存的路径最好在tomcat的webapp文件夹中，这样我们才能访问到图片。
如果图片不在Webapp目录下的，需要做做映射才能访问图片，回调显示图片才能成功。
UEditor后端保存图片到目标位置之后，返回前端一个url。前端根据url，去取图片，取不到。
如果想把图片存储到 非Webapp等硬盘目录，比如C:/img，需要手动修改controller.jsp的rootPath
图片保存在项目的外面，比如C:/img，前端请求不可能直接访问到，需要做映射。linux系统的话 一般需要做静态资源服务器域名访问。
在良好的web架构中，图片和web站点是分开的，放在不同的服务器上，实现静态资源分离。
也就是说 我们的web 在使用ueditor富文本编辑器时 上传插件上传的图片也应该上传到 图片资源服务器中。
也就是要 上传到远程服务器上， 甚至可能要实现跨域上传。
查询了很多资料之后 发现 主要有两种实现方式:
推荐方式二，方式一实现起来比较复杂，需要一定的理解。
默认使用的controller.jsp是一种很简单的操作，就是把文件流保存到 指定路径下。
如果我们要实现 跨域上传图片到远程服务器的话 必须重写 这个controller，接收文件流之后 上传到远程服务器 ，返回图片地址。
关于接收文件流 上传到远程服务器的 代码思路 可以参考:
java上传文件到远程服务器(一)---HttpURLConnection方式java上传文件到远程服务器(二)---HttpClient方式java上传文件到远程服务器七牛云
JSP页面中在初始化UE的JS中 需要重新设置一下每个插件的调用事件，如下:
简单介绍：
UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl; 是用来获取Action的，照写就行，然后就是下面的 UE.Editor.prototype.getActionUrl=function(action){....} 这里面的if语句，就是用来设置自定义action路由的，这里叫Controller。
这里的action也就是 我们选中的 插件的 动作，对应的名称可以在 config.json中查找。
如图:
大家可以在这个步骤上进行 修改 使用 我们前面提供的三种方式 修改 图片上传。
上传完成之后 返回图片的地址 即可。
需要注意的是 这里返回的 图片地址使用json格式，格式必须 符合 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.jpgprivate String original;//图片名称demo.jpg....getter & setter...}=======================ReturnUploadImage End==============================================这里官方文档也说的很清楚，对应 config、uploadimage、uploadscrawl、uploadvideo、uploadfile....都有各自的格式文档里面这些对应的就是xxxxActionName官方文档截图：
图片上传时调用的接口是在ueditor.config.js中设置的:
我们就想着 能不能直接把这个 改成 远程服务器上的 controller.jsp就可以把图片上传到远程服务器上了。
答案是 可以。
但是 需要做一些处理。
因为我们使用的java版本的ueditor，controller.jsp运行接收图片是需要java环境的，所以我们首先在远程服务器上部署一个tomcat。
然后在tomcat的webapp目录中新建一个ROOT目录。
把config.json和controller.jsp放入其中。
启动tomcat即可。
如图:
内容如下:
saveRootPath 和 imagePathFormat 共同决定了 存储的路径 /data/nginx/static/editor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}。
代码为:
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。
如果不加这两句的话 会报跨域错误,类似于:
启动tomcat后我们发现已经可以访问到 这个controller了。
我这里图片资源服务器是配置有域名的,如果域名是: test.123.com。
tomcat的端口是9003。
直接访问tomcat的端口显示如下:
如果没有域名的话 直接使用远程ip也可以。
那么 我们就可以在web中配置这个服务器接收接口了。
找到 web项目初始化ueditor使用的ueditor.confi.js。
修改如下:
如图:
到这里就配置完成了。
启动web项目，上传图片成功:
然后到 配置的保存图片路径/data/nginx/static/editor/upload/image中查看，成功保存:
