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

我的官网、公司项目都须要 可视化编辑器，百度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