记录KindEditor上传图片时候发生的错误:Blocked a frame with origin “http://localhost:8080” from accessing a cross-origin frame 错误
我是用的KindEditor的版本4.1.11,在KindEditor官网可以进行下载。
然后引入进入VUE项目里面,在main.js里面注入4个文件
然后开始正常配置显示,结果到了上传图片的时候发生了 Blocked a frame with origin “http://localhost:8080” from accessing a cross-origin frame 错误。
原来这样子引进去是错误的,不应该引入kindeditor-all-min.js
正确的引入是
然后在开始改源码kindEditor.js
1.打开文件,找到下面的这行代码:
KindEditor.plugin(‘image’, function(K) {
2.查找下面提交图片办法,并将其注释掉,因为会出现跨域问题:
//uploadbutton.submit();
3.把下边的代码粘在上一行代码的后边:
var formData = new FormData();
var file=uploadbutton.fileBox[0].files[0];
formData.append(file.name, file);
//console.log(file,formData)
K.ajaxForm(self.options.uploadJson, function(data) {
dialog.hideLoading();
//console.log(data);
if (data.error==0) {
//console.log(self.options);
var html = '<img src="' + self.options.basePath + data.url + '" />';
//console.log(html)
self.appendHtml(html).hideDialog().focus();
}
},'POST',formData,'json');
这里值得注意的是 formData.append(file.name, file); 的file.name,是后端接收数据的字段。(要求和后端协商好)
4.输入_ajax,查找_ajax名称的函数,在此函数的后面新增如下代码:
function _ajaxForm(url, fn, method, param, dataType) {
method = method || 'GET';
dataType = dataType || 'json';
var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.open(method, url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (fn) {
var data = _trim(xhr.responseText);
if (dataType == 'json') {
data = _json(data);
}
fn(data);
}
}
};
xhr.send(param);
}
5.在此函数后面加上如下代码,这样就可以用ajax方式上传图片了:
K.ajaxForm=_ajaxForm;
最后贴一下kindeditor-all.js的完成代码
kindeditor-all.js