UEditor单图片上传的跨域问题

在公司的一个项目中，管理后台开发采用了D2Admin，这其中关于富文本的编辑又用到了UEditor。

关于UEditor的详细使用就不再赘述，具体可以参考文章：http://fex.baidu.com/ueditor/

 

按照文档说明，后台配置好以后，就可以上传文件了，个人后台配置参数如下：

{
    "imageActionName": "uploadimage", 
    "imageFieldName": "upfile", 
    "imageMaxSize": 2048000, 
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], 
    "imageCompressEnable": true, 
    "imageCompressBorder": 1600, 
    "imageInsertAlign": "none", 
    "imageUrlPrefix": "http://127.0.0.1:8000", 
    "imagePathFormat": "/static/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"
}

 

经测试多图片上传的时候是没问题的，但点击单图片上传始终不成功。经过了几天痛苦的摸索和查找，逐步定位到了问题是由于跨域导致的问题：

官方文档也说的很清楚：

                 

 

我这里采用Ajax上传的方式来解决这个问题。参考文章：https://www.jianshu.com/p/6dbc32080469

首先我们需要修改ueditor.all.js，这里参考doAjax，新增doAjaxFile函数用来上传文件：

function doAjaxFile(url, ajaxOptions) {
        console.log('doAjaxFile-----------------------------------------------------------')
        console.log(url)
        console.log(ajaxOptions)

        var xhr = creatAjaxRequest(),
        //是否超时
        timeIsOut = false,

        //默认参数
        defaultAjaxOptions = {
            method: 'POST',

            //超时时间。 默认为5000， 单位是ms
            timeout: 15000,
            
            //是否是异步请求。 true为异步请求， false为同步请求
            async: true,
            
            //请求携带的数据。
            data: {},

            processData: false,
            contentType: false,
            cache: false,

            onsuccess:function() {
            },
            onerror:function() {
            }
        };

        if (typeof url === "object") {
            ajaxOptions = url;
            url = ajaxOptions.url;
        }
        if (!xhr || !url) return;
        var ajaxOpts = ajaxOptions ? utils.extend(defaultAjaxOptions,ajaxOptions) : defaultAjaxOptions;

        //超时检测
        var timerID = setTimeout(function() {
            if (xhr.readyState != 4) {
                timeIsOut = true;
                xhr.abort();
                clearTimeout(timerID);
            }
        }, ajaxOpts.timeout);

        var method = ajaxOpts.method.toUpperCase();
        var str = url + (url.indexOf("?")==-1?"?":"&")
        xhr.open(method, str, ajaxOpts.async);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (!timeIsOut && xhr.status == 200) {
                    ajaxOpts.onsuccess(xhr);
                } else {
                    ajaxOpts.onerror(xhr);
                }
            }
        };

        // xhr.upload.addEventListener("progress", function(event) {
        //     if(event.lengthComputable){
        //         progress.style.width = Math.ceil(event.loaded * 100 / event.total) + "%";
        //     }
        // }, false);
     
        xhr.send(ajaxOpts.data);

        // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }

 

然后在UE.Ajax中新增函数：

sendfile:function(url, opts) {
            doAjaxFile(url, opts);
}

最后就是替换下面函数的代码：

domUtils.on(input, 'change', function()

修改后的文件：

ueditor.all.js

ueditor.all.min.js

记得这两个文件要同时替换。

 

现在终于能实现单图片上传了！