zoukankan      html  css  js  c++  java
  • 在Ueditor / Umeditor中实现上传图片跨域

      近几天公司的后台管理需要图文编辑文章,但是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地址,此时自己处理下,插入文章,大功告成。

      

  • 相关阅读:
    青松云安全-WAF-1.0.655 (ubuntu 14.04 server)
    相似变换和仿射变换
    参数坐标系统变换
    城市测量坐标系统的建立
    工程测量坐标系
    大地测量控制点坐标转换技术规范
    为什么样本方差(sample variance)的分母是 n-1?
    似大地水准面
    typedef的用法
    同一椭球面经纬度坐标与空间直角坐标之间的相互转换
  • 原文地址:https://www.cnblogs.com/mazhaokeng/p/6684996.html
Copyright © 2011-2022 走看看