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