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

具体缘由点这里

结语

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

但愿能对你们有所帮助

 

原文出处：https://www.cnblogs.com/lhyxq/p/10784864.html