Ueditor 跨域上传图片,图片回显不能接收到json数据问题。 30C

问题描述:搭建了俩服务器,一个资源服务器,一个应用服务器,
当使用Ueditor上传功能时,必须将图片上传到资源服务器,也就是远程服务器时,会出现跨域问题,一个应用服务器时用Ueditor上传图片到一个应用中,没有问题,json也可以接收到,但上传到资源服务器时,上传的Controller可以正常执行、返回json数据,但接收不到json数据,导致图片无法回显
使用 document.domain = "http://localhost";会报错,不知如何配置。
菜鸟一枚,请高手指点一二

1.downFile=文件服务器 / tuji=项目目录

(文件服务器地址为:http://localhost:8080 项目目录地址:http://localhost:80)
图片说明
图片说明
.

Ueditor.all.js报错的位置

图片说明

2.jsp页面代码


<%@ page language="java" contentType="text/html; charset=UTF-8"
    import="com.tuji.utils.FileUtil"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<% String contextPath = FileUtil.httpPath; %>
<%--  <% String contextPath = "http://"+request.getServerName()+":"+request.getLocalPort()+request.getContextPath(); %> --%>
<!DOCTYPE html>
    <script type="text/javascript" charset="utf-8" src="<%=contextPath%>/resource/web/common/ueditor/third-party/jquery-1.10.2.js"></script>
    <script type="text/javascript" charset="utf-8" src="<%=contextPath%>/resource/web/common/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="<%=contextPath%>/resource/web/common/ueditor/ueditor.all.js"> </script>
    <script type="text/javascript" charset="utf-8" src="<%=contextPath%>/resource/web/common/ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
    //编辑器资源文件根路径 最好在ueditor.config.js中配置
    window.UEDITOR_HOME_URL = "<%=contextPath%>/";
    //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor',{initialFrameHeight: 500,initialFrameWidth:800,maximumWords:3000,elementPathEnabled:false});
    //复写UEDITOR的getActionUrl 方法,定义自己的Action
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        if (action == 'uploadimage' || action == 'uploadfile') {
            var id = $('#carInfoId').val();
               return '<%=contextPath %>/file/ueditorUpload';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    };
    // 复写UEDITOR的getContentLength方法 解决富文本编辑器中一张图片或者一个文件只能算一个字符的问题,可跟数据库字符的长度配合使用
    UE.Editor.prototype._bkGetContentLength = UE.Editor.prototype.getContentLength;
    UE.Editor.prototype.getContentLength = function(){
        return this.getContent().length;
    }
</script>
<html>
    <head>
        <%@ include file="../../common/common.jsp"%>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="${ctx}/resource/web/sys/sys/sys.css">
        <link rel="stylesheet" type="text/css" href="${ctx}/resource/web/common/css/backstageCommon.css">

<%--         <script type="text/javascript" charset="utf-8" src="${ctx }/resource/web/common/ueditor/ueditor.config.js"></script> --%>
<%--         <script type="text/javascript" charset="utf-8" src="${ctx }/resource/web/common/ueditor/ueditor.all.min.js"> </script> --%>
<!--         建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败 -->
<!--         这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文 -->
<%--         <script type="text/javascript" charset="utf-8" src="${ctx }/resource/web/common/ueditor/lang/zh-cn/zh-cn.js"></script> --%>
    </head>
    <body class="bgColor2" style="text-align: center;">
        <div style="width: 20%;margin: 0 auto;margin-top: 10%;">
            <form id="saveForm" action="${ctx }/sys/opus/saveContent" method="post">
                <input type="hidden" name="id" value="${opus.id }">
                <input type="button" id="close" class='bgColor2 borderColor2 fontColor1 btn alertBtn pageBtn' style='margin: 0 auto;font-size:12px;margin-bottom: 80px;' value="关&nbsp;闭">
                <input type="button" id="saveContent" class='bgColor2 borderColor2 fontColor1 btn alertBtn pageBtn' style='margin: 0 auto;font-size:12px;margin-bottom: 80px;' value="保&nbsp;存">
                <br/>
                <div style="color: white;margin-bottom: 30px;">${opus.name }</div>
                <script name="content" id="editor" type="text/plain">
                    ${opus.content }
                </script>
            </form>
        </div>
        <%@ include file="../../common/upload.jsp"%>
    </body>

    <!-- 富文本编辑器 -->
    <script type="text/javascript">

//  document.domain = "http://localhost:8080";

    $("#close").click(function() {
        window.close();
    });
    var isFirst = true;
    $("#saveContent").click(function() {
        if(!isFirst){
            return;
        }
        $("#saveForm").submit();
        return;
        $.ajax({
            type: "POST",
            url: "${ctx}/sys/opus/saveContent",
            data:{
                "id" : '${opus.id}',
                "content" : $("#editor").val()
            },
            dataType : "json",
            success: function(data) {
                if(data.result == 0){
                    alert("保存成功!")
                }else{
                    alert(data.msg);
                }
            }
        });
    });
    $(".pageBtn").hover(function() {
        $(this).removeClass("bgColor2");
        $(this).addClass("bgColor1");

        $(this).removeClass("fontColor1");
        $(this).addClass("fontColor3");

        $(this).css("transition", "all 0.25s ease");
    }, function() {
        $(this).removeClass("bgColor1");
        $(this).addClass("bgColor2");

        $(this).removeClass("fontColor3");
        $(this).addClass("fontColor1");

        $(this).css("transition", "all 0.5s ease");
    });


    </script>
    </html>






**3.接收Ueditor上传的Conroller**
/**
     * Ueditor 文件上传Action
     * @param req 
     * @return UEDITOR 需要的json格式数据
     */
    @CrossOrigin
    @RequestMapping(value="ueditorUpload",method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
    @ResponseBody
    public Map<String,Object> upload(HttpServletRequest request){
        Map<String,Object> result = new HashMap<String, Object>();

        MultipartHttpServletRequest mReq  =  null;
        MultipartFile file = null;
        InputStream is = null ;
        String fileName = "";

        try {
            mReq = (MultipartHttpServletRequest)request;
            // 从config.json中取得上传文件的ID
            file = mReq.getFile("upfile");
            // 原始文件名   UEDITOR创建页面元素时的alt和title属性
            String originalFileName = file.getOriginalFilename();
            String filePath = "";
            if (!file.isEmpty()) {
                try {
                    String newName = UUID.randomUUID().toString()
                            + file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
                    String path = FileUtil.getUeditorDownPath();
                    FileUtil.uploadFile(request, new BufferedInputStream(file.getInputStream()), path + newName);
                    filePath = path + newName;
                    Long fileSize = file.getSize();
                    SysFile sysFile = new SysFile();
                    sysFile.setPath(filePath);
                    sysFile.setSize(fileSize + "");
                    sysFile.setName(originalFileName);
                    sysFileServiceI.saveOrUpdate(sysFile);
                    result.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
                    result.put("url", FileUtil.getHttpPath() + filePath);
                    result.put("title", originalFileName);
                    result.put("original", originalFileName);
                } catch (IOException e) {
                    e.printStackTrace();
                    result.put("success", false);
                    result.put("msg", "服务器异常,请联系管理员!");
                }
                return result;
            } else {
                result.put("success", false);
                result.put("msg", "文件内容为空!");
                return result;
            }

        }
        catch (Exception e) {
            System.out.println(e.getMessage());
            result.put("state", "文件上传失败!");
            result.put("url","");
            result.put("title", "");
            result.put("original", "");
            System.out.println("文件 "+fileName+" 上传失败!");
        }

        return result;
    }

1个回答

前几天用ajax做了个跨域的,,
跨域相应的话需要,在响应头中加入:(据说可能造成安全问题)

respons.setHeader("Access-Control-Allow-Origin", "*");

你先试试,,有问题还可以追问,,能帮到你请采纳。^.^

akoall
akoall 我这里可以访问到上传的Controller的,并且设置了@CrossOrigin允许跨域访问,主要是返回时Ueditor无法获得json,
接近 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐