·基于thinkphp5.0和百度编辑器UMeditor 跨域上传图片实现

1、下载两者源码;

2,简单配置 :

  a. 一套thinkphp框架是显示前端界面,搭配编辑器环境。对应域名为 http://tp.com;

 这是前端界面配置 但是还要修改一下umeditor.config.js 文件    这里配置那个URL ,我思考了很久

        我是这么想的  本地站点域名配置到了www/tp5/public位置 ,现在是要实例编辑器加一个路径,而编辑器的文件位置就在public下面:

在此情况下 编辑器会在界面正常显示:

好接下来考虑的问题就是图片上传了。这一步暂时先不说。先说说API接口配置。

   b.一套thinkphp框架提供API接口调用。使用的是编辑器自带的php上传方法。 对应的域名是 http://tp_api.com

因为考虑到跨域的原因所以 在入口文件里面进行允许跨域操作:

修改编辑器自带的上传图片方法

到这个时候两边都已经配置好,现在来说一下上传的问题 :

  c.图片上传--跨域

           在网上资料都有说明和编辑器官方文档也有说明 不支持单张图片跨域上传。有很多小伙伴也在网上公布了跨域上传的解决办法。可能在各自的开发环境下都是成功的。但是对于我说,只能另辟蹊径了。

这里参考了以为小伙伴的建议,对我说受益匪浅   这是网址链接 :http://www.cnblogs.com/hpnet/p/6290452.html。

这是一种解决跨域上传的办法:
             

但是在我这边是不可以使用这种方法,前端界面不能使用php进行数据的转换和传递。【具体原因也说不清】。只能考虑修改js进行图片上传

 也就是在访问这个地址的时候图片是在后台上传成功的。但是返回来的json数据是无法接收的。问题就在这里。出现报错的界面如下:

在上传操作过程中与之有关的js是dialog/image/image.js文件,通过实际测试知道一个问题就是 只要一个json数组赋值给变量 r 那所有的问题解决了:

第一想法就是使用ajax异步请求数据。重新请求一次数据。在图片上传的时候 把返回的json数据存入到session中。在执行js文件的时候用ajax跨域请求某一个接口,并返回数据。

也就有了下面js文件的配置:

对应的接口【上面有显示】非常注意jsonp的请求格式

 实际过程中 js调试是个很大的问题,异步返回的数据有延迟效应,必须把对应的操作放到success的方法中:通过断点调试一个一个的找。才发现问题。

            还有一个问题就是一定要搞清楚实际的js代码流程顺序。很重要,要分清代码之间的逻辑关系。

            还有一个问题是:最初的想法是ajax请求接口返回数据直接赋值给变量r即可。把实际逻辑操作放到sucess中,。但是实际的结果并不是正常的。那么思考问题的方向应该是 数据拿到了,那么只能是success里面的功能操作出了问题。要找到问题的症结所在。使用浏览器自带的断点调试。一步步的走下去。问题自然会出来。

到这个时候。再去进行跨域图片上传。完美。

熬了今天,在大神的帮助下完美解决。学到了不少。。。。。

        

时间: 2024-11-05 13:39:14

·基于thinkphp5.0和百度编辑器UMeditor 跨域上传图片实现的相关文章

ueditor富文本编辑器跨域上传图片解决办法

在使用百度富文本编辑器的过程中,如果是有一台单独的图片服务器就需要将上传的图片内容放到图片服务器,也就是比如在a.com的编辑器上传图片,图片要保存到img.com的跨域上传图片功能,而在ueditor官方文档中说不支持单图上传的跨域, 网上查了一下各种花里胡哨,一顿操作猛如虎,比如加document.domain,配置全域名的等等都是然并卵,我仔细研究了一下ueditor的demo文件,相出了一个折中办法,很简单只需要修改demo中两个地方的代码外加写一个上传接口即可. 首先引入页面uedit

让 umeditor 支持跨域上传图片

事实上,umeditor 上传图片采用的是 form+隐藏iframe方式,已经能做到无刷新跨域上传.但小小遗憾的是做的并不完美,上传图片后,反馈的json信息,js并不能读取.原因在于,js不能操作跨域的iframe. 1 var r = this.contentWindow.document.body.innerHTML; 此句代码在FF Chrome上都会报错.浏览器的这种限制,可以通过两个方式来解决 换成flash上传 主页跟iframe页都设置 document.domain . 第一

跨域上传图片的尝试过程,最终成功了。哈哈

关于这个跨域上传图片的问题,其实去年底的时候就该去实现的,因为老板朝三暮四,一会儿让做这个,一会儿看那个,就耽误了.因为这个过程花费了我整整一天的时间,我认为有必要记录下来. 首先,项目是一个ERP,针对的是公司的一个小型电商的网站.项目经理让我搭建一个图片服务器, 当时也是为了完(尝)成(尝)任(新)务(鲜),用的都是当时从没接触过的.通过百度就选择了 Nginx + Nodejs + express + ImageMagick 来实现的. 当时还简单看了一下淘宝的TFS(Taobao Fil

React + fetch API + 百度地图api + 跨域 填坑

做项目遇到一个百度地图api 的跨域问题.由于使用fetch ,在调用类似 http://api.map.baidu.com/geocoder/v2/callback=renderReverse&location=39.983424,116.322987&output=json&pois=1&ak=您的ak 的时候,不可避免的出现了跨域问题. fetch(baseUrl + 'location=39,116&output=json&ak=您的ak&c

VUE3.0升级与配置(跨域等)

1.检查本机vue版本 vue -V 2.升级vue3.0命令 npm install -g @vue/cli 3.创建完项目后,在项目根目录新增vue.config.js文件,插入代码(简洁) 1 module.exports = { 2 runtimeCompiler: true, //是否使用包含运行时编译器的 Vue 构建版本 3 publicPath: '', 4 productionSourceMap: false, //不在production环境使用SourceMap 5 dev

kindeditor4跨域上传图片解决

项目中正在使用kindeditor, 版本号4.1.10 非常多公司的图片会走CDN,须要单独的一台图片上传服务如:(upload.268xue.com) kindeditor上传图片的简单内部流程: 上传button是提交到iframe.生成1个form和1个iframe,form提交到(arget)iframe iframe的onload方法获取返回的值.然后调用配置回调方法afterUpload/afterError. 详细实现:(在a.com选中图片,上传用upload.268xue.c

Kindeditor跨域上传图片在ASP.NET方案中的解决

虽然标题写的是ASP.NET的解决方案,但是也可用在PHP,Jsp中.直接上代码 首先在客户端中配置 var editor; document.domain = window.location.host;//js解析域 KindEditor.ready(function (k) { editor = k.create('#editor_id', { uploadJson: GlobalConfig .RestServiceUrl + "/FileUpload/upload_json.ashx?f

php 之跨域上传图片

因为要将所有上传的图片上传到一台独立的图片服务器上面,js上传时存在跨域问题,网上找到这种,通过php curl方式,将图片重新发送到另外一台服务器上保存,并返回图片路径! 这种方式存在一定问题:1,上传大图片时,比如2M,需要将图片首先传到服务器,然后再传到图片服务器,中间需要4M的传输,加大了上传时间!2,从服务器转到图片服务器的时候因为没有保存,传输使用的是临时文件,考虑到图片格式的限制,将图片进行了重命名,传输之后对该图片进行删除,碰到一些未知问题是可能导致图片删除失败,增加了服务器存储

iframe跨域上传图片

方案一:用jquery的$.post异步提交,然后把返回来的值用jquery填充到隐藏域中.可是$.post不支持跨域. jQuery.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. 方案二:利用iframe以及jquery进行表单post提交.代码如下: == a.com/post.html == <script> function postcallback(data){ //code... } </script> <form action=&qu