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头,以便浏览器自动添加文件边界
结语
最后说一句: "珍爱生命远离,不维护插件"
希望能对大家有所帮助