3、引入上傳所需的jar包

 com.gitee.qdbp.thirdparty
 ueditor
 1.4.3.3


 commons-codec
 commons-codec


 commons-fileupload
 commons-fileupload
 1.3.1


 commons-io
 commons-io
 2.5
 compile


 org.json
 json

4、新建上傳文件保存目錄文件夾，如下

其中的config.json是從ueditor-1.4.3.3的文件夾里拷過(guò)來(lái)，因?yàn)槲野l(fā)現(xiàn)默認(rèn)上傳文件路徑就是config.json所在目錄，而且springboot下我試了配置imagePathFormat并沒有什么用。

5、新建UeditorController

用于讀取ueditor.json配置文件，同時(shí)實(shí)現(xiàn)上傳方法（當(dāng)然這里我們直接使用了ueditor.jar的上傳，因此顯得很簡(jiǎn)單，但如果要我們自己寫那就有一堆代碼量了）

import com.baidu.ueditor.ActionEnter;
import org.springframework.stereotype.Controller;
import org.springframework.util.ClassUtils;
import org.springframework.web.bind.annotation.RequestMapping;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;
 
/**
 * 百度富文本編輯器
 * 描述1：config.json中配置的如圖片大小限制（imageMaxSize）文件類型等在頁(yè)面js中已經(jīng)驗(yàn)證過(guò)了，后臺(tái)不需要在處理
 * 描述2：使用ueditor.jar的話就不需要自己
 * 描述3：config.json中imageUrlPrefix配置舉例："imageUrlPrefix": "/fileupload/ueditor"
 * 描述3：config.json中imagePathFormat配置舉例："imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}"
 * 描述4：imageUrlPrefix + imagePathFormat 為上傳文件的訪問路徑
 *
 * zkh
 * 2019年11月14日 9:09
 */
@Controller
public class UeditorController {
 
  // /ueditor/jsp/config.json文件所在的父目錄，上傳文件默認(rèn)根目錄為config.json文件所在目錄
  private String configJsonParentPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/fileupload/ueditor";
 
  /**
   * UEditor初始化時(shí)會(huì)以get方式請(qǐng)求serverUrl地址，并且需要在action=config時(shí)返回UEditor配置文件信息
   * 描述：使用ueditor.jar包中的ActionEnter的話，就不需要自己再去實(shí)現(xiàn)其上傳功能，因?yàn)锳ctionEnter已經(jīng)幫我們實(shí)現(xiàn)了
   */
  @RequestMapping("ueditor")
  public void getEditorConfig(HttpServletRequest request, HttpServletResponse response, String action) {
    response.setContentType("application/json");
    try {
      String exec = new ActionEnter(request, configJsonParentPath).exec();
      if(action!=null && (action.equals("listfile") || action.equals("listimage"))) {
        exec = exec.replace(configJsonParentPath.substring(1), "/");
      }
      PrintWriter writer = response.getWriter();
      writer.write(exec);
      writer.flush();
      writer.close();
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
}

注意看注釋

6、接著，我們需要將ueditor.config.js中的serverUrl配置為我們?cè)诘?步的那個(gè)controller，如下

7、最后還要在config.json中配置下我們上傳的具體細(xì)節(jié)，下面以圖片上傳為例

/* 上傳圖片配置項(xiàng) */
  "imageActionName": "uploadimage", /* 執(zhí)行上傳圖片的action名稱（舉例：http://localhost:8080/ueditor?action=uploadimage） */
  "imageFieldName": "upfile", /* 提交的圖片表單名稱 */
  "imageMaxSize": 2048000, /* 上傳大小限制，單位B */
  "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
  "imageCompressEnable": true, /* 是否壓縮圖片,默認(rèn)是true */
  "imageCompressBorder": 1600, /* 圖片壓縮最長(zhǎng)邊限制 */
  "imageInsertAlign": "none", /* 插入的圖片浮動(dòng)方式 */
  /* imageUrlPrefix + imagePathFormat 為當(dāng)前文件的訪問路徑 */
  "imageUrlPrefix": "/fileupload/ueditor", /* 圖片訪問路徑前綴 */
  /* imagePathFormat默認(rèn)以當(dāng)前config.json所在的目錄為根目錄 */
  "imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* （注意：默認(rèn)以當(dāng)前config.json所在的目錄為根目錄）上傳保存路徑,可以自定義保存路徑和文件名格式 */
                /* {filename} 會(huì)替換成原文件名,配置這項(xiàng)需要注意中文亂碼問題 */
                /* {rand:6} 會(huì)替換成隨機(jī)數(shù),后面的數(shù)字是隨機(jī)數(shù)的位數(shù) */
                /* {time} 會(huì)替換成時(shí)間戳 */
                /* {yyyy} 會(huì)替換成四位年份 */
                /* {yy} 會(huì)替換成兩位年份 */
                /* {mm} 會(huì)替換成兩位月份 */
                /* {dd} 會(huì)替換成兩位日期 */
                /* {hh} 會(huì)替換成兩位小時(shí) */
                /* {ii} 會(huì)替換成兩位分鐘 */
                /* {ss} 會(huì)替換成兩位秒 */
                /* 非法字符 \ : * ? " < > | */
                /* 具請(qǐng)?bào)w看線上文檔: fex.baidu.com/ueditor/#use-format_upload_filename */

這里我們需要關(guān)注重點(diǎn)理解的是 imageUrlPrefix 、imagePathFormat

1) 域名 + imageUrlPrefix + imagePathFormat 為當(dāng)前文件的訪問路徑；

2）imageUrlPrefix是圖片訪問路徑前綴，例如：http://localhost:8080/fileupload/ueditor，imageUrlPrefix就是其中的“/fileupload/ueditor”；

3）imagePathFormat是以imageUrlPrefix為根路徑的文件存放的具體路徑，例如：

http://localhost:8080/fileupload/ueditor/image/20190202/121222.jpg，imagePathFormat就是其中的“/image/20190202/121222.jpg”；

4）剩下其他參數(shù)就很明顯了。

7、可能會(huì)遇到的問題

1、明明配置的文件最大為2048000，但是文件只有1M多點(diǎn)后臺(tái)報(bào)錯(cuò)了？

解決：這是因?yàn)槟J(rèn)開啟了springboot的上傳，在application.properties中 spring.servlet.multipart.enabled=false 就可以了，或者也可以跳下它的默認(rèn)最大值 spring.servlet.multipart.max-file-size=1MB，具體如下圖：

2、明明修改了imagePathFormat，單還是保存在了原始的路徑下？

解決：直接將config.json文件放到了我想保存文件的位置即可。

3、在線管理圖片無(wú)法顯示？

解決：在我們上面的UeditorController中其實(shí)已經(jīng)解決了，就是當(dāng)action=listfile或者action=listimage時(shí)將new ActionEnter(request, configJsonParentPath).exec()得到的字符串中的configJsonParentPath路徑替換為空字符串即可，如下

最后啟動(dòng)服務(wù)，打開http://localhost:8080/ueditor/index.html頁(yè)面測(cè)試，效果如下圖：

看完了這篇文章，相信你對(duì)“springboot下怎么實(shí)現(xiàn)ueditor上傳功能”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！