真正解决百度编辑器UEditor上传图片跨域问题

gkpeng 2020-02-16 我要评论

做前后端分离的项目用到UEditor，把上传图片程序拿出来放到了接口程序中，上传图片接口已经做了跨域处理，按理说编辑器中上传图片应该不会有问题。可是配置好图片上传路径后，运行，打开调试，测试一下，报错了：

找到上传图片的代码，发现引用的是webuploader.js，先修改下，直接引用webuploader.js。

经过调试找到，实际上传图片走的就是这里了，webuploader.js文件。

起初在网上查，尝试了各种方案修改前后端代码，都不成功。偶然想起用jquery ajax上传试试吧，正好程序已经引用了jquery。于是修改上面那行代码：

$.ajax({
    url:server,
    dataType:'json',
    type:opts.method,
    async: false,
    data: formData,
    processData : false, // 使数据不做处理
    contentType : false, // 不要设置Content-Type请求头
    success: function(data){
　　　　console.log(data);
    },
    error:function(response){
　　　　console.log(response);
    }
});

// xhr.send( formData );

一试之下，竟然成功了，看来后端的跨域设置肯定没问题。

那这样也不行啊，前端进度什么的都没了。

找到更新进度的代码，就这里了。

那让jquery ajax使用这里的xhr对象行不行呢，试一下，修改上传部分代码：

$.ajax({
    url:server,
    dataType:'json',
    type:opts.method,
    async: false,
    data: formData,
    xhr: function(){
        return xhr;
    },
    processData : false, // 使数据不做处理
    contentType : false, // 不要设置Content-Type请求头
    success: function(data){
        console.log(data);
    },
    error:function(response){
        console.log(response);
    }
});

// xhr.send( formData );

上传图片测试一下，ok，成功啦。