UEditor單圖上傳跨域問題解決方案

UEditor

UEditor是百度團隊提供的富文本編輯器

git地址爲:https://github.com/fex-team/ueditor

在最近的項目中使用了該插件做爲項目的富文本編輯器

因爲種種緣由項目須要採用先後分離的方式,因此會致使該插件的單圖上傳功能出現跨域問題(CORB)

 

官方對於該問題給出的答覆爲:

 

因爲時間關係來不及改換其餘的富文本編輯器,因此在源碼中進行了魔改

用本身的方式來解決了這一問題,發揮想象力,故發文分享

 

代碼實現

首先咱們須要在三萬三千行代碼中找到本來的單圖上傳部分的代碼,在 ueditor.all.js 文件中

咱們能夠在代碼編輯器中搜索 simpleupload

 

 如上圖所示

而後找到上傳圖片的部分代碼

 

而後把插件爲 input 綁定的事件註釋掉

在該代碼的後面添加如下代碼:

　　　　 // 單圖上傳
      input.onchange = function(){
        if (!input.value) return;
        var loadingId = "loading_" + (+new Date()).toString(36);
        var params =
          utils.serializeParam(me.queryCommandValue("serverparam")) || "";

        var imageActionUrl = me.getActionUrl(me.getOpt("imageActionName"));
        var allowFiles = me.getOpt("imageAllowFiles");

        me.focus();
        me.execCommand(
          "inserthtml",
          '<img class="loadingclass" id="' +
          loadingId +
          '" src="' +
          me.options.themePath +
          me.options.theme +
          '/images/spacer.gif">'
        );
        /* 判斷後端配置是否沒有加載成功 */
        if (!me.getOpt("imageActionName")) {
          errorHandler(me.getLang("autoupload.errorLoadConfig"));
          return;
        }
        // 判斷文件格式是否錯誤
        var filename = input.value,
          fileext = filename ? filename.substr(filename.lastIndexOf(".")) : "";
        if (
          !fileext ||
          (allowFiles &&
            (allowFiles.join("") + ".").indexOf(fileext.toLowerCase() + ".") ==
            -1)
        ) {
          showErrorLoader(me.getLang("simpleupload.exceedTypeError"));
          return;
        }

        var formData = new FormData()
        formData.append('upfile', input.files[0]);
        // 替換你的URL
        $.ajax('你的服務器上傳路徑',{
          data: formData,
          processData:false,
          contentType: false,
          type:"post",
          success:function(data){
            console.log(data)
            try{
            var link,
              json,
              loader;
            json = JSON.parse(data);
            link = '服務器存放圖片的路徑' + json.url;if (json.state == "SUCCESS" && json.url) {
              loader = me.document.getElementById(loadingId);
              domUtils.removeClasses(loader, "loadingclass");
              loader.setAttribute("src", link);
              loader.setAttribute("_src", link);
              loader.setAttribute("alt", json.original || "");
              loader.removeAttribute("id");
              me.fireEvent("contentchange");
            } else {
              showErrorLoader && showErrorLoader(json.state);
            }
          } catch (er) {
            console.log(er)
            showErrorLoader &&
            showErrorLoader(me.getLang("simpleupload.loadError"));
          }
          }
        })
      }

爲了方便使用了jquery的Ajax來進行圖片上傳

 須要注意的是:

 　　　　　　processData:false,
          contentType: false,

processData這裏是防止Ajax將圖片文件轉換爲字符串上傳
contentType是讓Ajax不要添加contentType頭,以便瀏覽器自動添加文件邊界

具體緣由點這裏

結語

最後說一句: "珍愛生命遠離,不維護插件"

但願能對你們有所幫助