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头,以便浏览器自动添加文件边界

具体原因点这里

结语

最后说一句: "珍爱生命远离,不维护插件"

希望能对大家有所帮助