UEditor配置,上传图片和附件(二):跨域上传

时间:2022-08-29 08:41:50

需求场景

    需求:网站有两台服务器,分别作为图片服务器和web服务器,图片服务器地址为img.yuanzw.com,web服务器地址为www.yuanzw,com,需要在web服务器上使用UEditor上传图片,但是上传图片地址为img.yuanzw.com的图片服务器,如何解决?

查找问题关键点

    通过FireBug或其他手段,很容易发现UEditor上传图片的组件在dialogs/image文件夹下面,其中image.html是实例化时调用的代码文件,UEditor上传功能使用的是第三方的SWFUpload插件,如果对该插件有问题,可以参考我的博客:http://blog.csdn.net/lusend/article/details/8393211,上传图片组件实例化时有一个Url参数,声明了图片上传时请求的服务器的地址,这里是我们需要修改的地方,查看image.html文件可以发现,实例化是Url参数的值是:url:editor.options.imageUrl,知道这个就好办了,去UEditor的配置文件自定义imageUrl地址就可以了,打开editor_config.js文件,默认数据是这样的,imageUrl:URL+"net/imageUp.ashx"。

尝试解决方案

    修改imageUrl参数,指向图片服务器的上传处理程序,我现在的配置是这样的:imageUrl: http://img.yuanzw.com/ueditor1_2_4_0-utf8-net/net/imageUp.ashx,单独请求这个地址,返回的数据如下:{'url':'','title':'','original':'','state':'未知错误'},这说明文件请求到了,再次打开使用编辑器的网页,上传图片,报错了,如下:

UEditor配置,上传图片和附件(二):跨域上传

    通过谷歌浏览器自带的调试工具,查看NetWork项(网页向服务器发起的请求),

UEditor配置,上传图片和附件(二):跨域上传

    这一项请求报错了,再看看Console输出项:

UEditor配置,上传图片和附件(二):跨域上传

    提示为crossdomain.xml文件未找到,那么这个crossdomain.xml文件是干什么的呢?百度一下,你就知道,这是跨域请求的一个配置文件,使用crossdomain.xml让Flash可以跨域传输数据,这个博客也说得非常清楚,可以参考一下:http://blog.csdn.net/zws1987211/article/details/7173216,在图片服务器下放置一个crossdomain.xml文件,内容如下:

[html] view plaincopy
  1. <?xml version="1.0"?>  
  2. <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">  
  3. <cross-domain-policy>  
  4.   <allow-access-from domain="*.yuanzw.com" />  
  5.   <allow-http-request-headers-from domain="*.yuanzw.com" headers="*"/>  
  6. </cross-domain-policy>  

测试

    重新测试上传图片功能,图片上传成功。

最后说明

    UEditor可以全部部署在Web服务器上,上传文件的处理程序需要部署在图片服务器上,图片具体保存方法以及上传过程中图片的处理,都可以在处理程序imageUp.ashx中完成,图片的具体保存地址,在UEditor的配置文件editor_config.js中完成,节点为imagePath,系统默认的值为“/net”,我这里设置的值为“http://img.yuanzw.com/ueditor1_2_4_0-utf8-net/net/“,上传图片后,图片地址如下: UEditor配置,上传图片和附件(二):跨域上传