百度富文本框上傳圖片路徑前綴配置問題

 ueditor 默認設置的 保存圖片的 路徑 是相對路徑，項目相關的。

 

保存的圖片會放在tomcat的webapp目錄下的 項目 文件夾中。

F:\tomcat7\webapps\ROOT

這樣的配置 會 導致 重啟  tomcat后  保存的 圖片  丟失。

 

 

解決方法一 修改圖片保存路徑在tomcat的webapp中項目之外

 

修改了config.json中的imagePathFormat參數重新設置圖片保存路徑，比如：
"imagePathFormat": "/../temp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */

 

我們這里在原路徑上加了/../temp。

意思是 項目路徑ROOT里的的上一級路徑，也就是 路徑設置為項目之外，webapp中。

如圖:

F:\tomcat7\webapps\temp\ueditor\jsp\upload\image\20170825

 

 

需要注意的是:

一、圖片保存路徑在項目之外最好先新建好文件夾，不然第一次上傳圖片時創建目錄速度會比較慢，會導致首張圖片回調找不到圖片404。

 

圖片保存的路徑最好在tomcat的webapp文件夾中，這樣我們才能訪問到圖片。

如果圖片不在Webapp目錄下的，需要做做映射才能訪問圖片，回調顯示圖片才能成功。

UEditor后端保存圖片到目標位置之后，返回前端一個url。前端根據url，去取圖片，取不到。

如果想把圖片存儲到 非Webapp等硬盤目錄，比如C:/img，需要手動修改controller.jsp的rootPath

 

1. <%@ page language= "java" contentType="text/html; charset=UTF-8"
2. import="com.baidu.ueditor.ActionEnter"
3. pageEncoding= "UTF-8"%>
4. <%@ page trimDirectiveWhitespaces= "true" %>
5. <%
6.  
7. request.setCharacterEncoding( "utf-8" );
8. response.setHeader( "Content-Type" , "text/html");
9.  
10. //String rootPath = application.getRealPath( "/" );
11. String rootPath = "c:/img";
12. System.out.print(rootPath);
13. out.write( new ActionEnter( request, rootPath ).exec() );
14.  
15. %>

圖片保存在項目的外面，比如C:/img，前端請求不可能直接訪問到，需要做映射。linux系統的話 一般需要做靜態資源服務器域名訪問。

 

 

 

 

 

解決方法二  把圖片上傳到遠程服務器上

 

在良好的web架構中，圖片和web站點是分開的，放在不同的服務器上，實現靜態資源分離。

 

也就是說 我們的web 在使用ueditor富文本編輯器時 上傳插件上傳的圖片也應該上傳到 圖片資源服務器中。

 

也就是要 上傳到遠程服務器上， 甚至可能要實現跨域上傳。

 

 

 

查詢了很多資料之后 發現 主要有兩種實現方式:

 

推薦方式二，方式一實現起來比較復雜，需要一定的理解。

 

 

 

方式一 重寫接收圖片的controller以及上傳組件的調用

 

默認使用的controller.jsp是一種很簡單的操作，就是把文件流保存到 指定路徑下。

 

如果我們要實現 跨域上傳圖片到遠程服務器的話 必須重寫 這個controller，接收文件流之后 上傳到遠程服務器 ，返回圖片地址。

 

關於接收文件流 上傳到遠程服務器的 代碼思路 可以參考:

JSP頁面修改

JSP頁面中在初始化UE的JS中 需要重新設置一下每個插件的調用事件，如下:

1. // 初始化文本編輯器
2. $( ".ueditorFlag").each(function() {
3. var id = this.id;
4. var ue = UE.getEditor(id, {
5. pasteplain: true, /* 純文本粘貼 */
6. autoHeightEnabled: false,/* 啟用右側滾輪,默認是true自動長高模式*/
7. toolbars: [[
8. 'fullscreen', 'source', '|', 'undo', 'redo', '|',
9. 'bold', 'italic', 'underline',
10. 'removeformat', '|',
11. 'insertorderedlist', 'insertunorderedlist',
12. 'indent', '|', 'justifyleft', 'justifycenter',
13. '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', 'insertimage',
14. '|', 'link', 'unlink'
15. ]]
16. });
17.  
18. UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;
19. UE.Editor.prototype.getActionUrl=function(action){
20. if (action == 'uploadimage' ||action== 'uploadscrawl' || action == 'uploadimage') {
21. return "${basePath}/upload";
22. } else if(action =='uploadvideo') {
23. return "${basePath}/upload";
24. } else if(action == 'listimage'){
25. return "${basePath}/download";
26. } else{
27. return this._bkGetActionUrl.call(this, action);
28. }
29. }
30.  
31. console.log( 'ueditor for ' + id + ' init.');
32. });

 

簡單介紹：
UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl; 是用來獲取Action的，照寫就行，然后就是下面的 UE.Editor.prototype.getActionUrl=function(action){....}  這里面的if語句，就是用來設置自定義action路由的，這里叫Controller。

這里的action也就是 我們選中的 插件的 動作，對應的名稱可以在 config.json中查找。

如圖:

 

 

新建一個接收圖片上傳到遠程服務器的controller

1. /**
2. * 上傳圖片
3. *
4. * @return
5. * @throws IOException
6. * @throws IllegalStateException
7. * @RequestParam("upload")MultipartFile file,
8. */
9. @RequestMapping(value ="upload")
10. public String uploadImage(
11. HttpServletRequest request,HttpServletResponse response)
12. throws IllegalStateException, IOException{
13. response.setContentType( "text/html;charset=UTF-8");
14. ReturnUploadImage rui = null;//這個是UEditor需要的返回值內容，UEditor要的返回值需要封裝成Json格式
15. // 轉型為MultipartHttpRequest：
16. MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest) request;
17. // 獲得文件：
18. MultipartFile file =multipartRequest.getFile( "upfile"); //UEditor傳到后台的是這個upfile，其他的文件上傳，應該也差不多是這個，還沒去研究，斷點一下就知道了
19. // 寫入文件
20. File imageFile =newFile( "/"+Uuid()+".jpg");
21. file.transferTo(imageFile);
22. //現在獲取了File接下來要上傳到OSS上
23. if(imageFile!=null){
24. rui = new ReturnUploadImage();
25. rui.setTitle(imageFile.getName()); //這里需要設置文件名稱如：xxx.jpg
26. rui.setOriginal(imageFile.getName()); //這里需要設置文件名稱如：xxx.jpg
27. // 判斷文件是否為圖片文件
28. String r =ImageUtils.fileDetermine(imageFile, 3 * 1024);
29. if (!StringUtils.isNotEmpty(r)) {
30. // 上傳文件(這里文件類型，要根據實際上傳的類型去做，暫時是直接設置了.jpg，並且先保存到磁盤，這樣對磁盤比較傷，每次上傳都要先保存到磁盤，然后再刪除)
31. ResultInfo resultInfo = OSSObjTools.uploadObject(imageFile,
32. "subWebPublicNotice");//這里是自己封裝的OSS，上傳到OSS上面
33. // 判斷如果返回結果不為空並且MD5返回值比較結果正確，就設置文件路徑保存到數據庫
34. if (resultInfo != null
35. &&resultInfo.geteTag().equalsIgnoreCase(
36. MD5Tools.file2MD5(imageFile))) {
37. rui.setState( "SUCCESS");//這里上傳成功的話一定要設置大寫的 SUCCESS，失敗還沒測試，猜應該是FAIL，回頭再去官網找找
38. rui.setUrl(CommonTools.catchUrlPath(PubParam.BUCKET_NAME,
39. PubParam.Mark_ShenZhen) +resultInfo.getFilePath()); //這里是設置返回給UEditor的圖片地址
40. }
41. }
42. // 判斷臨時存放的文件是否存在
43. if (imageFile.exists()) {
44. // 刪除臨時存放的文件
45. imageFile.delete();
46. }
47. }
48. String result = JSON.toJSONString(rui); //這邊就是為了返回給UEditor做的格式轉換
49. response.getWriter().write(result);
50. return null;
51. }

 

大家可以在這個步驟上進行 修改 使用 我們前面提供的三種方式 修改 圖片上傳。

 

上傳完成之后 返回圖片的地址 即可。

 

需要注意的是  這里返回的 圖片地址使用json格式，格式必須 符合 ueditor的格式規范，否則 插件無法識別 回顯圖片。

 

 

返回給UEditor的參數

這里你應該參考http://fex.baidu.com/ueditor/#dev-request_specification
官方文檔里面的 后端請求參數-請求規范，
官方有介紹了，返回參數的格式，格式中json的key就是對應了類ReturnUploadImage里面的屬性。
轉換后格式應該是這樣的，要嚴格按照文檔上面的格式
{"original":"5dfcfea3e3b442bda3972053266c3bd3.jpg","state":"SUCCESS","title":"5dfcfea3e3b442bda3972053266c3bd3.jpg","url":"http://www.xxxxx321.com/mmmm/xxxModuleName/20150922/5dfcfea3e3b442bda3972053266c3bd3.jpg"}
注：不同的文件上傳，返回的屬性不一樣
=======================ReturnUploadImageStart============================================
public classReturnUploadImage {
private String state;//上傳狀態SUCCESS 一定要大寫
private String url;//上傳地址
private String title;//圖片名稱demo.jpg
private String original;//圖片名稱demo.jpg
....getter & setter...
}
=======================ReturnUploadImage End==============================================
這里官方文檔也說的很清楚，對應 config、uploadimage、uploadscrawl、uploadvideo、uploadfile....都有各自的格式
文檔里面這些對應的就是xxxxActionName
官方文檔截圖：

 

 

 

 

方式二  調用遠程服務器上的controller.jsp

 

圖片上傳時調用的接口是在ueditor.config.js中設置的:

1. // 服務器統一請求接口路徑
2. , serverUrl: URL + "jsp/controller.jsp"

 

我們就想着  能不能直接把這個 改成 遠程服務器上的 controller.jsp就可以把圖片上傳到遠程服務器上了。

 

答案是  可以。

 

但是 需要做一些處理。

 

環境布置

 

因為我們使用的java版本的ueditor，controller.jsp運行接收圖片是需要java環境的，所以我們首先在遠程服務器上部署一個tomcat。

然后在tomcat的webapp目錄中新建一個ROOT目錄。

把config.json和controller.jsp放入其中。

啟動tomcat即可。

如圖:

 

config.json

內容如下:

1. /* 前后端通信相關的配置,注釋只允許使用多行方式 */
2. {
3. /* 服務器存儲配置 */
4. "saveRootPath": "/data/nginx/static", /* 文件保存的根路徑 */
5.  
6. /* 上傳圖片配置項 */
7. "imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
8. "imageFieldName": "upfile", /* 提交的圖片表單名稱 */
9. "imageMaxSize": 2048000, /* 上傳大小限制，單位B */
10. "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
11. "imageCompressEnable": true, /* 是否壓縮圖片,默認是true */
12. "imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
13. "imageInsertAlign": "none", /* 插入的圖片浮動方式 */
14. "imageUrlPrefix": "http://upload.23cube.com", /* 圖片訪問路徑前綴 */
15. "imagePathFormat": "/editor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
16. /* {filename} 會替換成原文件名,配置這項需要注意中文亂碼問題 */
17. /* {rand:6} 會替換成隨機數,后面的數字是隨機數的位數 */
18. /* {time} 會替換成時間戳 */
19. /* {yyyy} 會替換成四位年份 */
20. /* {yy} 會替換成兩位年份 */
21. /* {mm} 會替換成兩位月份 */
22. /* {dd} 會替換成兩位日期 */
23. /* {hh} 會替換成兩位小時 */
24. /* {ii} 會替換成兩位分鍾 */
25. /* {ss} 會替換成兩位秒 */
26. /* 非法字符 \ : * ? " < > | */
27. /* 具請體看線上文檔: fex.baidu.com/ueditor/#use-format_upload_filename */
28.  
29. /* 塗鴉圖片上傳配置項 */
30. "scrawlActionName": "uploadscrawl", /* 執行上傳塗鴉的action名稱 */
31. "scrawlFieldName": "upfile", /* 提交的圖片表單名稱 */
32. "scrawlPathFormat": "/editor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
33. "scrawlMaxSize": 2048000, /* 上傳大小限制，單位B */
34. "scrawlUrlPrefix": "http://upload.23cube.com", /* 圖片訪問路徑前綴 */
35. "scrawlInsertAlign": "none",
36.  
37. /* 截圖工具上傳 */
38. "snapscreenActionName": "uploadimage", /* 執行上傳截圖的action名稱 */
39. "snapscreenPathFormat": "/editor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
40. "snapscreenUrlPrefix": "http://upload.23cube.com", /* 圖片訪問路徑前綴 */
41. "snapscreenInsertAlign": "none", /* 插入的圖片浮動方式 */
42.  
43. /* 抓取遠程圖片配置 */
44. "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
45. "catcherActionName": "catchimage", /* 執行抓取遠程圖片的action名稱 */
46. "catcherFieldName": "source", /* 提交的圖片列表表單名稱 */
47. "catcherPathFormat": "/editor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
48. "catcherUrlPrefix": "http://upload.23cube.com", /* 圖片訪問路徑前綴 */
49. "catcherMaxSize": 2048000, /* 上傳大小限制，單位B */
50. "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取圖片格式顯示 */
51.  
52. /* 上傳視頻配置 */
53. "videoActionName": "uploadvideo", /* 執行上傳視頻的action名稱 */
54. "videoFieldName": "upfile", /* 提交的視頻表單名稱 */
55. "videoPathFormat": "/editor/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
56. "videoUrlPrefix": "http://upload.23cube.com", /* 視頻訪問路徑前綴 */
57. "videoMaxSize": 102400000, /* 上傳大小限制，單位B，默認100MB */
58. "videoAllowFiles": [
59. ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
60. ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上傳視頻格式顯示 */
61.  
62. /* 上傳文件配置 */
63. "fileActionName": "uploadfile", /* controller里,執行上傳視頻的action名稱 */
64. "fileFieldName": "upfile", /* 提交的文件表單名稱 */
65. "filePathFormat": "/editor/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
66. "fileUrlPrefix": "http://upload.23cube.com", /* 文件訪問路徑前綴 */
67. "fileMaxSize": 51200000, /* 上傳大小限制，單位B，默認50MB */
68. "fileAllowFiles": [
69. ".png", ".jpg", ".jpeg", ".gif", ".bmp",
70. ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
71. ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
72. ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
73. ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
74. ], /* 上傳文件格式顯示 */
75.  
76. /* 列出指定目錄下的圖片 */
77. "imageManagerActionName": "listimage", /* 執行圖片管理的action名稱 */
78. "imageManagerListPath": "/editor/upload/image/", /* 指定要列出圖片的目錄 */
79. "imageManagerListSize": 20, /* 每次列出文件數量 */
80. "imageManagerUrlPrefix": "http://upload.23cube.com", /* 圖片訪問路徑前綴 */
81. "imageManagerInsertAlign": "none", /* 插入的圖片浮動方式 */
82. "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件類型 */
83.  
84. /* 列出指定目錄下的文件 */
85. "fileManagerActionName": "listfile", /* 執行文件管理的action名稱 */
86. "fileManagerListPath": "/editor/upload/file/", /* 指定要列出文件的目錄 */
87. "fileManagerUrlPrefix": "http://upload.23cube.com", /* 文件訪問路徑前綴 */
88. "fileManagerListSize": 20, /* 每次列出文件數量 */
89. "fileManagerAllowFiles": [
90. ".png", ".jpg", ".jpeg", ".gif", ".bmp",
91. ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
92. ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
93. ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
94. ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
95. ] /* 列出的文件類型 */
96.  
97. }

saveRootPath 和  imagePathFormat 共同決定了 存儲的路徑 /data/nginx/static/editor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}。

 

 

 

controller.jsp

代碼為:

1. <%@ page language= "java" contentType="text/html; charset=UTF-8" import="com.baidu.ueditor.ActionEnter" pageEncoding="UTF-8"%>
2. <%@ page trimDirectiveWhitespaces= "true"%>
3. <%
4. request.setCharacterEncoding( "utf-8");
5. response.setHeader( "Content-Type", "text/html");
6. response.setHeader( "Access-Control-Allow-Origin", "http://localhost:8080");
7. response.setHeader( "Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With");
8. String rootPath = application.getRealPath( "/");
9. out.write( new ActionEnter(request, rootPath).exec());
10. %>

 response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
 response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With");

這兩句是相對於原controller.jsp新增的。

主要是允許跨域傳輸。

 

http://localhost:8080需要修改成與自己web服務器所在的 ip或者域名一致。

 

我這里是 用本地來測試 所以設置成了http://localhost:8080。

 

如果不加這兩句的話 會報跨域錯誤,類似於:

XMLHttpRequest cannot load http://d.com/controller.jsp?action=uploadimage&encode=utf-8. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://c.com' is therefore not allowed access.

 

 

 

啟動tomcat后我們發現已經可以訪問到 這個controller了。

我這里圖片資源服務器是配置有域名的,如果域名是: test.123.com。

tomcat的端口是9003。

直接訪問tomcat的端口顯示如下:

如果沒有域名的話 直接使用遠程ip也可以。

 

 

 

那么 我們就可以在web中配置這個服務器接收接口了。

找到 web項目初始化ueditor使用的ueditor.confi.js。

修改如下:

 , serverUrl: "http://test.123.com:9003/controller.jsp"

 

如圖:

 

 

到這里就配置完成了。

 

啟動web項目，上傳圖片成功:

 

 

然后到 配置的保存圖片路徑/data/nginx/static/editor/upload/image中查看，成功保存: