问题描述:搭建了俩服务器,一个资源服务器,一个应用服务器,
当使用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="关 闭">
<input type="button" id="saveContent" class='bgColor2 borderColor2 fontColor1 btn alertBtn pageBtn' style='margin: 0 auto;font-size:12px;margin-bottom: 80px;' value="保 存">
<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;
}