码迷,mamicode.com
首页 > 编程语言 > 详细

百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源

时间:2014-11-23 23:28:35      阅读:784      评论:0      收藏:0      [点我收藏+]

标签:springmvc   freemarker   百度ueditor   ueditor   图片上传   

个人官网、公司项目都需要 可视化编辑器,百度UEditor做得很不错,就用的这个。项目后台用到了SpringMVC、Freemarker,开发过程中部署在Jetty,线上部署用Tomcat,最后可能配置Nginx代理。
 
    在实际使用过程中,遇到了太多的问题,因此有必要梳理和总结下。

1. 先说百度UEditor在Java环境中的使用:
1.1   Html页面或者Freemarker模版里,引入百度UEditor的相关JS和CSS,如下

  <script type="text/javascript" src="../../public/framework/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="../../public/framework/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="../../public/framework/ueditor/lang/zh-cn/zh-cn.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
   var ue = UE.getEditor(‘editor‘);
</script>

1.2接着在正文中,有如下代码
<script id="editor" type="text/plain" name="content" ></script>

1.3配置图片上传
  ueditor.config.js设置:serverUrl: URL + "../../../ueditor/controller.jsp"
  这个请求向后端发送请求:
 获得config.json总体的配置文件,config.json里设置了 抓取图片的url等各种参数。

2.图片上传是最麻烦的地方:?

 2.1项目中使用的是Freemarker作为视图层,并且我不想再配置JSP视图解析了,故不想使用controller.jsp这种JSP。
 而是改成了SpringMVC的Controller:
@Controller
public class UeditorController {

@RequestMapping("/ueditor/config")
public void config(HttpServletRequest request,
  HttpServletResponse response, String action) {
 response.setContentType("application/json");
 // config.json配置文件和图片上传位置,都默认为“网站根目录”
 String rootPath = request.getSession().getServletContext()    .getRealPath("/");

//自己设置的目录
 Object uploadRootPath = BasePropertyConfigurer.getContextProperty("setting.upload_root_path");
 if (uploadRootPath != null) {
  rootPath = uploadRootPath.toString();
 }

try {
  String exec = new ActionEnter(request, rootPath).exec();
  PrintWriter writer = response.getWriter();
  writer.write(exec);
  writer.flush();
  writer.close();
 } catch (IOException e) {
  e.printStackTrace();
 }
}
}

上述代码中的大部分内容,都是从controller.jsp搬来的。
经过实际使用发现,config.json配置信息和图都需要放到项目内部,即webapp下。

我个人想把图片存放到外部目录,方便备份,并且就算整个项目完全重新部署,用户和项目的图片数据也不会丢失。
所以,手动修改了rootPath ,最后config.json和图片目录都存放在C:/img下。

2.2第二天突然发现,图片无法上传 ,错误提示“无法获得数据”。(这个问题困扰了我几个小时)

Debug跟踪了每一层,发现SpringMVC拦截了图片上传请求。用户上传的图片,已经存储到服务器的临时目录,在拷贝这个图片到实际存储目录,提示找不到,最后也无法把图片回显给前端。

最后经过逐步对比昨天的代码,突然发现,某同事增加了SpringMVC上传配置。

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
     <property name="maxUploadSize" value="104857600"/>
       <property name="maxInMemorySize" value="4096"/>
  </bean>

有了上述配置,通过SpringMVC的Controller响应UEditor的各种请求,就出了问题。也没有找到好的解决办法。

最终,还是使用JSP的。

2.3使用JSP-controller.jsp响应UEditor,在SpringMVC中增加JSP视图解析配置。

<bean
       class="org.springframework.web.servlet.view.InternalResourceViewResolver">
       <property name="prefix" value="/ueditor/" />
       <property name="suffix" value=".jsp" /><!--可为空,方便实现自已的依据扩展名来选择视图解释类的逻辑 -->
       <property name="viewClass"
           value="org.springframework.web.servlet.view.JstlView" />
   </bean>

2.4图片上传之后,前端还需要回显图片,这个时候又要响应图片请求。

后端管理系统,SpringMVC是拦截所有的请求,“/”,而不是只拦截动态请求,比如“*.html”。所以,SpringMVC可以处理拦截到图片请求。

增加如下配置:

<mvc:resources mapping="/ueimg/ueditor/**"  location="file:${setting.upload_root_path}/ueimg/ueditor/**"  />

2.5我不想让SpringMVC处理图片,以为我觉得让Tomcat性能更好。

问题来了,图片是存储到服务器的外部目录,比如C:/img,而不是/webapp/img。

针对服务器内部的图片,Tomcat可以如下配置,web,xml

<servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>/static/*</url-pattern>
</servlet-mapping>

而据Boss所说,web.xml里不能映射图片到外部目录。(我没有去尝试)

解决办法显然是有的,只要部署了Nginx,任何静态资源,我都可以配置代理,让Nginx响应或者控制转发。

但是,在开发过程中,我绝对不愿意再整个Nginx,项目开发依赖的环境越来越多,这是个大问题。

我认为Nginx只是提高性能,方便线上的,本地项目开发根本不应该依赖它。

最后,目前的情况下,我是让SpringMVC处理百度UEditor的图片请求,等到线上部署,配置Nginx,让Ngnix处理。

2.6除了上面第2个问题,增加SpringMVC上传配置,导致我原来的配置出现了问题,还有一个大问题。

我个人官网项目,前端和后端是一个项目,没有分开。

而公司项目,前端和后端是完全的2个项目。

config.json有如下配置:

"imageUrlPrefix": "", /* 图片访问路径前缀 */
   "imagePathFormat": "/ueditor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"

我自己的项目,没有配置“图片访问路径前缀”,经实际观察,后台数据库存储的图片url就是“相对路径”,

与imagePathFormat配置基本一样。

前端访问图片的时,由于配置域名,浏览器会自动加上当前项目的路径,比如"http://localhost:8080",或者“http://fansunion.cn”。

最终的图片访问路径是个“绝对路径”,"http://localhost:8080/ueditor/upload/..."

但是公司后端系统没有部署在根目录,访问路径是"http://localhost:8080/backend",

不配置mageUrlPrefix,后台存储的虽说是相对路径,但浏览器发送的url是:

"http://localhost:8080/backend/ueditor/...",没有加上"项目名称",所总是无法正常回显。

2.7为了解决公司后端项目,图片无法回显的问题,我配置了imageUrlPrefix:"http://localhost:8080/backend"。

图片就正常显示了。

问题又来了,数据库存储的图片路径是绝对的"http://localhost:8080/backend/ueditor"。

如果我们后端项目更换了路径,就无法响应这个图片了。

除此之外,前端项目显示图片时,后端必须响应图片请求,前端和后端产生了依赖关系,这是万万不能接受的。


2.8又改成不配置“图片访问路径前缀”,只存储图片的相对路径,后端项目开发部署在“根目录下”,访问路径是:“http://localhost:8080”。

后端项目有图片请求,自己处理,前端项目自己的图片请求,自己处理,前后端2个系统没有依赖。

本以为万事大吉了,结果又跪了。

前端项目也没有部署在根目录,加上了项目名称,如:http://localhost:8080/user-center

访问图片是路径是“http://localhost:8080/ueditor/...”,把user-center项目部署在根目录,图片就正常显示的。


2.9线上实际部署的时候,不可能前端和后端2个项目,都部署在根目录下。

因此,我们最终决定,把图片单独拿成一个单独的项目,启用自己的域名。

config.json中配置图片前缀为:“http://img.a.com”,数据库存储绝对路径,显示的时候,就是“http://img.a.com/ueditor/...”。

3.百度UEditor上传图片,很简单。

但由于后端项目的配置、前端和后端项目分离、配置了SpringMVC上传,种种因素导致这个问题变得有点复杂。经过各种尝试,总是能够找到一个解决方案,只是有的能接受,有的不能接受。

我自己的项目,我说了算,很容易搞定。公司的项目,我说了不算,情况也可能多变,麻烦死了额。


小雷FansUnion-博学的互联网技术工作者

2014年11月23日

湖北武汉循礼门

原文首发:http://fansunion.cn/article/detail/525.html

百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源

标签:springmvc   freemarker   百度ueditor   ueditor   图片上传   

原文地址:http://blog.csdn.net/fansunion/article/details/41420443

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!