完美解决 vue 使用kindeditor 编辑器上传图片时跨域问题

在vue中使用kindeditor编辑器时,上传图片的接口地址和当前项目域名不一致时,100%出现跨域报错,仔细分析,发现服务器已保存成功,但界面会提示跨域问题,导致图片无法正常插入到编辑器,解决方案如下:

1.查找kindeditor-all.js的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 = '';
                //console.log(html)
                self.appendHtml(html).hideDialog().focus();
              }
            },'POST',formData,'json');

4.查找_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;