问题:百度编辑器上传图片到本项目的时候,没有问题,一旦跨域上传图片的时候就会导致图片上传错误,原因是因为百度编辑器使用的编辑区域是IFrame,而父窗口和主窗口的数据不可跨域调用.
解决方案:将百度编辑器的图片数据提交到本项目,获取到图片的字节文件,接着使用远程方法调用将字节数据发送到图片项目存储到硬盘,存储成功之后,将图片的引用URL及其他信息以RMI的返回值返回,在本项目中将接收的上传成功的数据翻译到前端
所用技术:Ueditor、spring3.0+springMVC、spring3.0+hessian3.0
思想:
具体代码:
1、Ueditor demo.html
DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>ueditor demotitle>
head>
<body>
<script id="UContainer" name="content" type="text/plain" style="margin-top: 300px">
这里写你的初始化内容
script>
<script type="text/javascript" src="ueditor.config.js">script>
<script type="text/javascript" src="ueditor.all.js">script>
<script type="text/javascript">
//test************windows
var uploadImageUrl = 'http://127.0.0.1/ueditor/upload';
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function (action) {
// if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
if (action == 'uploadimage') {
return uploadImageUrl;
} else if (action == 'uploadvideo') {
return 'http://a.b.com/video.php';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
var toolbarsItems = [
[
'anchor', //锚点
'undo', //撤销
'redo', //重做
'bold', //加粗
'indent', //首行缩进
'snapscreen', //截图
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
//'source', //源代码
'blockquote', //引用
'pasteplain', //纯文本粘贴模式
'selectall', //全选
//'print', //打印
'preview', //预览
'horizontal', //分隔线
'removeformat', //清除格式
'time', //时间
'date', //日期
'unlink', //取消链接
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并单元格
'mergedown', //下合并单元格
'deleterow', //删除行
'deletecol', //删除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分单元格
'deletecaption', //删除表格标题
'inserttitle', //插入标题
'mergecells', //合并多个单元格
'deletetable', //删除表格
'cleardoc', //清空文档
'insertparagraphbeforetable', //"表格前插入行"
//'insertcode', //代码语言
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
'simpleupload', //单图上传
'insertimage', //多图上传
'edittable', //表格属性
'edittd', //单元格属性
'link', //超链接
'emotion', //表情
'spechars', //特殊字符
'searchreplace', //查询替换
'map', //Baidu地图
//'gmap', //Google地图
//'insertvideo', //视频
'help', //帮助
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'fullscreen', //全屏
'directionalityltr', //从左向右输入
'directionalityrtl', //从右向左输入
'rowspacingtop', //段前距
'rowspacingbottom', //段后距
'pagebreak', //分页
//'insertframe', //插入Iframe
'imagenone', //默认
'imageleft', //左浮动
'imageright', //右浮动
'attachment', //附件
'imagecenter', //居中
'wordimage', //图片转存
'lineheight', //行间距
'edittip ', //编辑提示
'customstyle', //自定义标题
'autotypeset', //自动排版
//'webapp', //百度应用
'touppercase', //字母大写
'tolowercase', //字母小写
'background', //背景
'template', //模板
//'scrawl', //涂鸦
//'music', //音乐
'inserttable', //插入表格
//'drafts', // 从草稿箱加载
'charts', // 图表
]
];
var ue = UE.getEditor('UContainer', {
toolbars: toolbarsItems,
autoHeightEnabled: true,
autoFloatEnabled: true
});
script>
body>
html>
2、common server
@RequestMapping(value = "ueditor/upload", method = RequestMethod.POST) @ResponseBody public Mapupload(HttpServletRequest request, HttpServletResponse response) { try { // String uploadDomain = "http://127.0.0.1:8083";//本地测试 Map result = new HashMap<>(); MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request; MultipartFile multipartFile = multipartHttpServletRequest.getFile("upfile"); Long startTime = System.currentTimeMillis(); String url = uploadDomain + "/hessian/hessianFileUploadImpl"; HessianFileUpload service = (HessianFileUpload) factory.create(HessianFileUpload.class, url); // Map map = service.uploadForStream(multipartHttpServletRequest.getInputStream(),multipartFile.getOriginalFilename(), multipartFile.getSize()); // Mapmap = service.uploadForSpring(multipartFile); byte[] data = multipartFile.getBytes(); if (data != null && data.length > 5242880 || data == null) {//上限5M 5242880 result.put("state", "文件过大,上传失败,上文大小上限5MB"); return result; } System.err.println("文件大小=" + (data.length)); Mapmap = service.uploadByBytes(data, multipartFile.getOriginalFilename(), multipartFile.getSize()); System.err.println("duration=" + (System.currentTimeMillis() - startTime)); return map; } catch (Exception e) { e.printStackTrace(); } return null; }
3、Hessian接口
public interface HessianFileUpload { /** * 按字节上传文件 * @return */ MapuploadByBytes(byte[] bytes,String filename, Long available); }
3、hessian实现
/** * 按字节上传, * * @param bytes * @return */ @Override public MapuploadByBytes(byte[] bytes, String oldFilename, Long available) { //test***********************windows本地测试 //download String domain = "http://127.0.0.1:8083/"; String realPathDown = "upload/"; //upload String realPathUpload = "D:\\Program Files (x86)\\JetBrains\\IDEA_WORKSPACE\\QyImage\\src\\main\\webapp\\upload"; //test*******************END // BufferedInputStream bis = null; BufferedOutputStream bos = null; Map jsonObject = new HashMap<>(); try { //获取客户端传递的InputStream // bis = new BufferedInputStream(inputStream); SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMdd"); String dateDir = simpleDateFormat.format(new Date()); //上传的路径名***************************** String uploadPath = realPathUpload + File.separator + dateDir; logger.info("uploadPath=" + uploadPath); File filey = new File(uploadPath); if (!filey.exists()) { filey.mkdirs(); } //获取后缀,仅限于图片格式 //[".png", ".jpg", ".jpeg", ".gif", ".bmp"] List limitsuffixList = Arrays.asList(".png", ".jpg", ".jpeg", ".gif", ".bmp"); String suffixName = oldFilename.substring(oldFilename.lastIndexOf("."), oldFilename.length()); if (!limitsuffixList.contains(suffixName)) { jsonObject.put("state", "文件格式不合法,支持的文件类型[\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"]"); return jsonObject;//文件后缀名不合法,上传失败 } //上传的文件名 String filename = UUID.randomUUID() + new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date()) + suffixName; logger.info("filename=" + filename); //文件名不能大于5M if (available > 5242880) { jsonObject.put("state", "文件过大,上传失败"); return jsonObject;//返回上传失败 } String saveFilename = uploadPath + File.separator + filename; //创建文件输出流 bos = new BufferedOutputStream(new FileOutputStream(new File(saveFilename))); // byte[] buffer = new byte[8192]; // int r = bis.read(buffer, 0, buffer.length); // while (r > 0) { // bos.write(buffer, 0, r); // r = bis.read(buffer, 0, buffer.length); // } bos.write(bytes); String imgAccessUrl = domain + realPathDown + File.separator + dateDir + "/" + filename; jsonObject.put("state", "SUCCESS"); jsonObject.put("url", imgAccessUrl);//图片的展示路径 jsonObject.put("title", oldFilename);//图片的名称 jsonObject.put("original", oldFilename); // response.getWriter().write(jsonObject.toString()); // response.setHeader("referer","http://127.0.0.1/"); logger.info(jsonObject.toString()); logger.info("-------upload success!-------------"); return jsonObject; } catch (IOException e) { throw new RuntimeException(e); } finally { if (bos != null) { try { bos.close(); } catch (IOException e) { throw new RuntimeException(e); } } // if (bis != null) { // try { // bis.close(); // } catch (IOException e) { // throw new RuntimeException(e); // } // } } }
4、hessian配置
服务端配置:
web.xml
<servlet> <servlet-name>hessianservlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class> <load-on-startup>1load-on-startup> servlet> <servlet-mapping> <servlet-name>hessianservlet-name> <url-pattern>/hessian/*url-pattern> servlet-mapping>
hessian-servlet.xml
<bean name="/hessianFileUploadImpl" class="com.*.HessianServerProxyExporter"> <property name="service" ref="hessianFileUploadImpl"/> <property name="serviceInterface"> <value> com.yizhilu.os.image.framework.hessian.service.HessianFileUpload value> property> bean>
hessian客户端配置
<bean id="hessianFileUpload" class="org.springframework.remoting.caucho.HessianProxyFactoryBean"> <property name="serviceInterface" value="com.*.framework.hessian.service.HessianFileUpload">property> <property name="serviceUrl"> <value>${fileUploadPath}/hessian/hessianFileUploadImplvalue> property> <property name="readTimeout"> <value>100000value> property> <property name="proxyFactory"> <bean class="com.*.hessian.client.HessianClientProxyFactory" /> property> <property name="chunkedPost" value="false" /> bean>