1. 程式人生 > >解決ueditor上傳檔案到tomcat虛擬路徑等問題

解決ueditor上傳檔案到tomcat虛擬路徑等問題

ueditor是百度出品的一款強大的富文字web編輯器,有需要的朋友可以到http://ueditor.baidu.com/去看看。

其包含有圖片,檔案等上傳功能,在使用檔案上傳功能的時候首先要進行相關的配置,包括前端後端的配置,具體的可以檢視官方文件,這裡我就不介紹了。我主要想說的是,ueditor的檔案上傳路徑預設是到專案釋出根目錄,而很多時候,我們是非常需要將檔案上傳到指定的磁碟目錄的,而且放到專案根目錄是非常不好的,因為當我們在tomcat重新發布專案的時候,之前上傳的檔案很可能就會不見了。

在網上搜索了一些關於這方面的解決方案,主要有兩種吧,一種是修改ueditor的java原始碼;另一種是上傳功能不使用ueditor,用另外的上傳方式。個人對這兩種方式都不是很滿意,首先修改原始碼可操作性不強,對於版本更新也不好,使用另外的上傳方式對於與ueditor其他功能的整合使用感覺會比較藍瘦,比如獲取已上傳的圖片或者檔案這些功能可能還需要自己寫相關的程式碼,不可忍受。

還是想通過修改相關的配置來解決這個問題。不斷翻閱ueditor配置文件和不斷嘗試後,終於解決了這個問題。

首先要知道,ueditor的前端配置是在ueditor.config.js進行的,裡面有個serverUrl,它是ueditor前端與後端互動的統一請求介面路徑,就是說如果你不自定義其他請求地址的話,前端到後端就必定要走這條路。


這個請求路徑可以修改,上面一個是demo預設的路徑,下面是我自己修改的。後端的介面程式碼如下:

    /**
	 * ueditor外掛後端配置,請注意一下幾點:
	 * 1.ueditor的config.json配置檔案需要放在rootPath/ueditor資料夾下,不然讀取不了配置,
	 * config.json放置在外部資料夾下,是為了把上傳的檔案也放到外部資料夾,以虛擬路徑來訪問,上傳到專案資料夾下,再次釋出後文件可能丟失
	 * (此處的ueditor是對應請求url中的ueditor的
	 * ,如果是/ueditor/sth/UEController則需要放在rootPath/ueditor/sth資料夾下。)
	 * 2.config.json配置中不需要配置檔案虛擬路徑,已用waitReplaceUrl佔位,在此處統一進行字元替換
	 */
	@ResponseBody
	@RequestMapping("/ueditor/UEController")
	public String UEController(HttpServletRequest request, HttpServletResponse response) {
		try {
			request.setCharacterEncoding("utf-8");
		} catch (UnsupportedEncodingException e) {
		}
		response.setHeader("Content-Type", "text/html");
		String rootPath = PropertiesUtils.getVal("config.properties", "attachmentLocation");
		String rootUrl = PropertiesUtils.getVal("config.properties", "attachmentUrl");
		// String rootPath = request.getServletContext().getRealPath("/");
		String result = new ActionEnter(request, rootPath).exec();
		String action = request.getParameter("action");

		// ueditor本省的bug,獲取線上檔案時去除絕對路徑
		if (action != null && (action.equals("listimage") || action.equals("listfile"))) {
			result = result.replaceAll(rootPath, "");
		}

		// 替換config.json中的檔案訪問路徑字首,避免要到json中寫死
		result = result.replaceAll("waitReplaceUrl", rootUrl);
		return result;
	}

這裡的路徑寫法有一定的要求,因為後臺去找config.json配置檔案的時候,它是去rootPath+請求的url前一截的資料夾去找的,就是像這裡的話,我的rootPath是D:/fzjcFileLocal/,請求的url是/ueditor/UEController,那麼config.json就要放到D:/fzjcFileLocal/ueditor這個路徑下,否則會因為找不到配置檔案而提示說“配置檔案初始化失敗”,請求成功返回的應該是config.json的配置內容。

這時候我們還需要做的是在config.json中配置圖片、檔案的訪問路徑字首,如imageUrlPrefix、scrawlUrlPrefixfileUrlPrefix等....fix,這裡可以直接寫成tomcat配置的檔案虛擬目錄。但是為了修改方面,我選擇用一個特定的字串waitReplaceUrl來代替,然後在後端進行替換(程式碼如上),這樣就不用到config.json修改了,只需要在功能的配置檔案修改移除就好了。到這裡就可以上傳到指定的虛擬目錄了。


但是發現其返回的圖片路徑是有問題的,線上管理的圖片訪問不了,檢查發現是其返回的相對路徑有問題,他返回的不是相對路徑而是絕對路徑,網上說這是ueditor的一個bug,但是我們可以做一個巧妙的處理,在後端對路徑進行一些替換,將根目錄replace掉就可以了。



至此這個問題算是較為令人滿意了,唯一的不足就是config.json需要放到虛擬目錄的指定資料夾,而不能放到釋出的工程裡,另外還有個問題就是本人用的springmvc框架,如果有配置springmvc的上傳配置的話,ueditor上傳檔案會提示找不到檔案,原因是有springmvc上傳配置會對請求request做一些處理,導致不能解析,這裡因為我沒有用到springmvc的上傳所以將上傳配置去掉就好了。如果其他朋友有更好的解決方案,歡迎交流。