遇到的問題:javascript
1.將ueditor加入/static目錄下,能正常顯示,可是出現「請求後臺配置項http錯誤,上傳功能將不能正常使用!」(解決在下面,都是自定義上傳的,若是須要官方的示例,我也無能爲力,沒搞出來........)php
2.解決問題一後,出現「上傳失敗」(解決在下面,同上)html
默認狀況下上傳圖片時的請求過程:前端
首先,初始化Ueditor插件時,在ueditor.all.js的大約8200行左右有一個請求配置文件內容的request。請求的是ueditor.config.js中serviceUrl的服務器路徑,即請求的是/jsp/controller.jsp文件。他返回的內容是/jsp目錄下的config.json文件的內容。若是這裏請求錯誤,前端控制檯會打印「請求後臺配置項http錯誤,上傳功能將不能正常使用!」的錯誤。java
其次,當咱們上傳圖片時,圖片的請求路徑、保存的地址都在/jsp目錄的下config.json文件中。請求成功時將返回相似以下json數據json
{ "state": "SUCCESS", "url": "upload/demo.jpg", "title": "demo.jpg", "original": "demo.jpg" }
這就爲咱們自定義上傳返回提供了思路,也就是下面的步驟。服務器
第一步:下載Ueditor,地址:http://ueditor.baidu.com/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-jsp 完成後將文件夾名改成ueditor,方便一些,而後複製此文件夾到Spring Boot項目的/resources/static目錄下。app
第二步:修改文件上傳配置路徑dom
打開ueditor目錄下的ueditor.config.js文件,修改serverUrl路徑,未修改狀況下,將請求ueditor/jsp/controller.jsp。他返回當前目錄的conf.json的內容。咱們要模擬出jsp
此內容。
由原來的 serverUrl: URL+"jsp/controller.jsp" 改成咱們本身的 serverUrl: "http://localhost:8080/ueditor/"
而後編寫comtroller處理請求,後臺ueditor以下:(我刪除了用不到的視頻、塗鴉什麼的,只留下了圖片的)將/jsp/config.json中的內容複製到字符串中,而後返回便可,注意的是先寫String s="";而後在雙引號內粘貼,這樣會自動將粘貼板中的雙引號加入反斜槓。
@RequestMapping(value = "/ueditor") @ResponseBody public String ueditor(HttpServletRequest request, HttpServletResponse response) { String s = "{\n"+ " \"imageActionName\": \"uploadimage\",\n" + " \"imageFieldName\": \"file\", \n" + " \"imageMaxSize\": 2048000, \n" + " \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n" + " \"imageCompressEnable\": true, \n" + " \"imageCompressBorder\": 1600, \n" + " \"imageInsertAlign\": \"none\", \n" + " \"imageUrlPrefix\": \"\",\n" + " \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\" }"; return s; }
這樣咱們請求過程的第一步完成,接下來咱們須要自定義上傳圖片的處理邏輯。首先,按照官方文檔的寫法http://fex.baidu.com/ueditor/#qa-customurl,要在使用插件的index.html中的修改action Url,方法以下
<script type="text/javascript"> var ue = UE.getEditor('container'); UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') { return 'http://localhost:8080/imgUpdate'; //在這裏返回咱們實際的上傳圖片地址 } else { return this._bkGetActionUrl.call(this, action); } } </script>
其後臺的imgUpdate以下:
@RequestMapping(value = "/imgUpdate") @ResponseBody public String imgUpdate(MultipartFile file) { if (file.isEmpty()) { return "error"; } // 獲取文件名 String fileName = file.getOriginalFilename(); // 獲取文件的後綴名 String suffixName = fileName.substring(fileName.lastIndexOf(".")); // 這裏我使用隨機字符串來從新命名圖片 fileName = Calendar.getInstance().getTimeInMillis() + Randoms.getRandomStringLower(4) + suffixName; // 這裏的路徑爲Nginx的代理路徑,這裏是/data/images/xxx.png File dest = new File(ConstantL.IMAGE_UPDATE_PATH + fileName); // 檢測是否存在目錄 if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); } try { file.transferTo(dest); //url的值爲圖片的實際訪問地址 這裏我用了Nginx代理,訪問的路徑是http://localhost/xxx.png String config = "{\"state\": \"SUCCESS\"," + "\"url\": \"" + ConstantL.BASE_URL + fileName + "\"," + "\"title\": \"" + fileName + "\"," + "\"original\": \"" + fileName + "\"}"; return config; } catch (IllegalStateException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return "error"; }
這裏返回值是參照文檔中的http://fex.baidu.com/ueditor/#dev-request_specification.須要注意的是,mgUpdate方法裏面的參數名稱必定要與ueditor方法中字符串s中的imageFieldName值相同,都是file,否則會報空指針異常。
這樣,應該就能夠上傳了。