百度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