UEditor跨域上传图片文件配置说明

1.修改ueditor.config.js 后台接收地址

// 服务器统一请求接口路径
   , serverUrl: "http://xxxxx/Utility/UEditor"

2.服务器配置对于的接收程序：
1).设置服务器允许跨域:

 <system.webServer>
   <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

2).修改config中config.json 文件返回的图片访问路径，不然上传图片后无法展示，其他路径依次修改

3).收到包含callback的请求action，必须把 callback返回，不然警告Cross-Origin Read Blocking (CORB) blocked cross-origin response，导致按钮无妨点击，文件列表无法显示

string callback = Request["callback"];
return Content(callback + "(" + 返回的Json+ ")");

3.上传图片成功，但是一直提示上传失败，需修改本地ueditor.all.js，修改后注意页面是否引用ueditor.all.js而不是ueditor.all.min.js

//  domUtils.on(iframe, 'load', callback);
// form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?':'&') + params);
//form.submit();
                function ajaxUploadFile(url, form) {
                    $.ajax({
                        cache: true,
                        type: "POST",
                        url: url,
                        data: new FormData(form),// 你的formid
                        processData: false,
                        contentType: false,
                        error: function (request) {
                            console.log(22);
                        },
                        success: function (json) {
                            var link, loader,
                                body = (iframe.contentDocument || iframe.contentWindow.document).body,
                                result = body.innerText || body.textContent || '';
                            var json = eval('('+json+')');
                            link = me.options.imageUrlPrefix + json.url;
                            if (json.state == 'SUCCESS' && json.url) {
                                loader = me.document.getElementById(loadingId);
                                loader.setAttribute('src', link);
                                loader.setAttribute('_src', link);
                                loader.setAttribute('title', json.title || '');
                                loader.setAttribute('alt', json.original || '');
                                loader.removeAttribute('id');
                                domUtils.removeClasses(loader, 'loadingclass');
                            } else {
                                showErrorLoader && showErrorLoader(json.state);
                            }
                            form.reset();
                        }
                    });
                }
                var action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
                ajaxUploadFile(action, form);

完美解决UEditor跨域上传遇到的问题

UEditor跨域上传图片文件配置说明

猜你喜欢