首页 > 代码库 > 百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源
百度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=http://www.mamicode.com/public/framework/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src=http://www.mamicode.com/public/framework/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src=http://www.mamicode.com/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=http://www.mamicode.com/"104857600"/>
<property name="maxInMemorySize" value=http://www.mamicode.com/"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=http://www.mamicode.com/"/ueditor/" />
<property name="suffix" value=http://www.mamicode.com/".jsp" />
<property name="viewClass"
value=http://www.mamicode.com/"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、静态资源