Ueditor前后端分离单图和多图上传跨域问题遇到的坑----笔记

本文链接：https://blog.csdn.net/weixin_43777184/article/details/84388658

由于第一次使用ueditor 做前后端分离，发现图片上传存在问题，个人笔记记录。
起始源码文件拷贝到项目参考官网。
1.注意替换ueditor.config.js文件中的serverUrl: URL + "jsp/controller.jsp"改为自己的项目接口

(function () {

    /**
     * 编辑器资源文件根路径。它所表示的含义是：以编辑器实例化页面为当前路径，指向编辑器资源文件（即dialog等文件夹）的路径。
     * 鉴于很多同学在使用编辑器的时候出现的种种路径问题，此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。
     * "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。
     * 如果站点中有多个不在同一层级的页面需要实例化编辑器，且引用了同一UEditor的时候，此处的URL可能不适用于每个页面的编辑器。
     * 因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。当然，需要令此处的URL等于对应的配置。
     * window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
     */
    window.UMEDITOR_HOME_URL = "/ueditor/"; 
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();
   
    //var URL = "http://localhost:3000/libs/ueditor/";
   
    /**
     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
     */
    window.UEDITOR_CONFIG = {

     
        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL

        // 服务器统一请求接口路径
        , ~~//serverUrl: URL + "jsp/controller.jsp"~~ 
        **serverUrl:"http://localhost:8081/ue-web-manager/jsp/controller.jsp"**     //这里替换掉自己的java接口
        //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
        , toolbars: [[
            'fullscreen', 'source', '|', 'undo', 'redo', '|',
        ......................................................................
        ]]

2.多图上传
会出现跨域问题在这里插入图片描述
$其实查看路径D:\workspace.metadata.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\ue-web-manager\ueditor\jsp\upload\image\20181123图片已经上传的到指定的ueditor项目目录下，但是由于跨域提示上传失败，各种百度后据说是因为多图上传发的是options请求会发两次请求需要先返回一个200才能发起第二次正式数据请求（options此处不再赘述）$
各种搜索后成功的方案：在WEB-INF中的web.xml文件中配置跨域设置（copy来的）重启后端服务。

 <!-- 跨域过滤器 -->
    <!-- 跨域请求设置开始 -->
        <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
            <param-name>cors.allowGenericHttpRequests</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>cors.allowOrigin</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.allowSubdomains</param-name>
            <param-value>false</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedMethods</param-name>
            <param-value>GET, HEAD, POST, OPTIONS</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedHeaders</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.exposedHeaders</param-name>
            <param-value>X-Test-1, X-Test-2</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportsCredentials</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>cors.maxAge</param-name>
            <param-value>3600</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <!-- 跨域请求设置结束 -->

成功如下：
在这里插入图片描述

3.单图上传官网说明：
iframe提交一脸懵
参考各种大神文章后各种尝试最终可用方案：修改ueditor.all.js源码（当然别忘记前端页面引用改为此文件。由于多图上传已经配置了跨域，后端可直接请求通过，不需要再做额外配置。之前先只做的单图上传没有在web.xml中配置发觉需要后端单独在controller.jsp中配置跨域设置。最后调整多图这两个跨域配置会报重复的错误要去掉controller.jsp中的配置下图被注释掉的部分。）
如果只做单图可在此配置后端跨域设置。

/**
                 * 改掉了ueditor源码，将本身的单文件上传的方法改为ajax上传，主要目的是为了解决跨域的问题
                */
                domUtils.on(input, 'change', function () {
                    if (!input.value) return;
                    var loadingId = 'loading_' + (+new Date()).toString(36);
                    var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));
                    var allowFiles = me.getOpt('imageAllowFiles');
                //     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" title="' + (me.getLang('simpleupload.loading') || '') + '" >');

                    
                    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 params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
                    var action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
                    var formData = new FormData();
                    formData.append("upfile", form[0].files[0]);
                    $.ajax({
                        url: action,
                        type: 'POST',
                        cache: false,
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            data = JSON.parse(data);
                            var link, loader,
                                body = (iframe.contentDocument || iframe.contentWindow.document).body,
                                result = body.innerText || body.textContent || '';
                            link = me.options.imageUrlPrefix + data.url;

                            if (data.state == 'SUCCESS' && data.url) {
                                loader = me.document.getElementById(loadingId);
                                loader.setAttribute('src', link);
                                loader.setAttribute('_src', link);
                                loader.setAttribute('title', data.title || '');
                                loader.setAttribute('alt', data.original || '');
                                loader.removeAttribute('id');
                                domUtils.removeClasses(loader, 'loadingclass');
                            } else {
                                showErrorLoader && showErrorLoader(data.state);
                            }
                            form.reset();
                        }
                    });
                    function showErrorLoader(title) {
                        if (loadingId) {
                            var loader = me.document.getElementById(loadingId);
                            loader && domUtils.remove(loader);
                            me.fireEvent('showmessage', {
                                'id': loadingId,
                                'content': title,
                                'type': 'error',
                                'timeout': 4000
                            });
                        }
                    }
                });