在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地址,此時自己處理下,插入文章,大功告成。

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM