Spring Boot集成百度Ueditor

時間 2019-11-29

標籤 spring boot 集成百度 ueditor 欄目 Spring 简体版

原文原文鏈接

遇到的問題：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";
}