在Ueditor / Umeditor中实现上传图片跨域
2017-04-09 15:54
183 查看
近几天公司的后台管理需要图文编辑文章,但是ueditor提供的方法中,本地图片的上传是通过flash的方式处理的,且不支持跨域。若要在已经前后端分离的Angular项目中使用,需要做复杂的环境配置。跟后台人员搞了几个小时后发现这个比较难实行,就算实行也要在前端搭建后台环境,违背了前后端分离的意愿。
最好的解决方法,就是使用原来熟悉的json的post图片的方法,舍弃ueditor默认的方法。死脑筋地搞默认方法实在是费时费力,不如另辟蹊径。
1.首先把自己的<input type='file' />标签做成绝对定位的块,浮在默认方法图标的上方,这样用户就点不到默认的图片上传按键了。
2.然后就按照自己的方法,完成html代码和js代码:
<input type="file" class="form-inline" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>
/* 图片上传 * */ $scope.uploadFile = function(files) { var formData = new FormData(); //Take the first selected file formData.append("upfile", files[0]); var url = ser_api.case.uploadImg; //http上传 var xhr = new XMLHttpRequest(); xhr.open( 'post', url ); xhr.send(formData); xhr.onreadystatechange = function(){ if (this.readyState == 4 && this.status == 200) { var res = ser_api.host + this.response; ser_umeditor.add( '<img class=upload-img src=' + res + ' />'); //用ueditor的方法在文章中插入图片 } }; };
后台保存成功后,就返回图片在服务器上的url地址,此时自己处理下,插入文章,大功告成。
相关文章推荐
- JSP Ueditor 实现图片跨域上传
- VUE + UEditor 单图片跨域上传功能的实现方法
- JavaWeb集成百度UMEditor详细操作(实现上传图片)+demo源码
- ueditor 编辑器的配置 实现了上传图片与文件功能---附效果图
- MVC使用百度开源文本编辑器UEditor实现图文并茂,字数限制,上传图片或涂鸦
- MVC ueditor的使用(实现上传图片功能)
- Spring mvc下ueditor跨域多图片上传失败解决方案
- Ueditor结合七牛云及百度云存储(JAVA版,ueditor-1.4.3)实现图片文件上传
- ueditor1_4_3-utf8-jsp 配置实现上传图片的功能
- 基于UEditor的单独图片上传实现
- Ueditor结合七牛云存储上传图片、附件和图片在线管理的实现
- springmvc集成Ueditor插件实现图片上传2、
- 利用ajaxfileupload.js实现跨域上传图片并处理返回的数据
- jfinal框架ueditor上传图片的实现方法
- 利用iframe实现图片跨域上传
- MVC使用百度开源文本编辑器UEditor实现图文并茂,字数限制,上传图片或涂鸦
- ueditor - 配置实现上传图片的功能
- ueditor精简和实现上传图片文件等
- 基于UEditor的单独图片上传JQuery插件实现
- ueditor1_4_3-utf8-jsp 配置实现上传图片的功能遇到的问题,改变图片上传请求地址