很詳細的SpringBoot整合UEditor教程

很詳細的SpringBoot整合UEditor教程

 版權聲明:本文爲博主原創文章,未經博主容許不得轉載。 https://blog.csdn.net/qq_33745799/article/details/70031641

UEditor只提供JSP版本的後端入口代碼。但提供了項目源碼,所以能夠根據業務需求修改源代碼。php

此處使用了SpringBoot框架,配備了Thymeleaf模板引擎,因此沒有必要再添加jsp來兼容UEditor,可經過修改源碼知足須要。下面是詳細教程。html

1.新建SpringBoot項目,添加web和thymeleaf包
前端

pom文件以下:vue

 

  1.  
    <?xml version="1.0" encoding="UTF-8"?>
  2.  
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.  
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.  
    <modelVersion>4.0.0</modelVersion>
  5.  
     
  6.  
    <groupId>com.example</groupId>
  7.  
    <artifactId>ueditor-test</artifactId>
  8.  
    <version>0.0.1-SNAPSHOT</version>
  9.  
    <packaging>jar</packaging>
  10.  
     
  11.  
    <name>ueditor-test</name>
  12.  
    <description>Demo project for Spring Boot</description>
  13.  
     
  14.  
    <parent>
  15.  
    <groupId>org.springframework.boot</groupId>
  16.  
    <artifactId>spring-boot-starter-parent</artifactId>
  17.  
    <version>1.5.2.RELEASE</version>
  18.  
     
  19.  
    <relativePath/> <!-- lookup parent from repository -->
  20.  
    </parent>
  21.  
     
  22.  
    <properties>
  23.  
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  24.  
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
  25.  
    <java.version>1.8</java.version>
  26.  
    <!--修改thymeleaf版本-->
  27.  
    <thymeleaf.version>3.0.3.RELEASE</thymeleaf.version>
  28.  
    <thymeleaf-layout-dialect.version>2.1.0</thymeleaf-layout-dialect.version>
  29.  
    </properties>
  30.  
     
  31.  
    <dependencies>
  32.  
    <dependency>
  33.  
    <groupId>org.springframework.boot</groupId>
  34.  
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
  35.  
    </dependency>
  36.  
    <dependency>
  37.  
    <groupId>org.springframework.boot</groupId>
  38.  
    <artifactId>spring-boot-starter-web</artifactId>
  39.  
    </dependency>
  40.  
     
  41.  
    <dependency>
  42.  
    <groupId>org.springframework.boot</groupId>
  43.  
    <artifactId>spring-boot-starter-test</artifactId>
  44.  
    <scope>test</scope>
  45.  
    </dependency>
  46.  
    </dependencies>
  47.  
     
  48.  
    <build>
  49.  
    <plugins>
  50.  
    <plugin>
  51.  
    <groupId>org.springframework.boot</groupId>
  52.  
    <artifactId>spring-boot-maven-plugin</artifactId>
  53.  
    </plugin>
  54.  
    </plugins>
  55.  
    </build>
  56.  
     
  57.  
     
  58.  
    </project>

2.從官網下載源代碼並解壓至項目,注意config.json我拷到了resources根路徑下,如圖:java

 

 

3.添加UEditorController,跳轉到index頁面:python

 

  1.  
    package com.example;
  2.  
     
  3.  
    import org.springframework.stereotype.Controller;
  4.  
    import org.springframework.web.bind.annotation.RequestMapping;
  5.  
     
  6.  
    /**
  7.  
    * Created by ldb on 2017/4/9.
  8.  
    */
  9.  
    @Controller
  10.  
    public class UEditorController {
  11.  
     
  12.  
     
  13.  
    @RequestMapping("/")
  14.  
    private String showPage(){
  15.  
    return "index";
  16.  
    }
  17.  
     
  18.  
     
  19.  
    }

4.運行項目。訪問路徑localhost:8080,跳轉到以下界面便是源碼已拷貝成功mysql

 

5.此時發現上傳圖片功能不能用。下面接着看。修改pom,添加UEditor依賴的Jar包。pom文件以下: jquery

  1.  
    <?xml version="1.0" encoding="UTF-8"?>
  2.  
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.  
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.  
    <modelVersion>4.0.0</modelVersion>
  5.  
     
  6.  
    <groupId>com.example</groupId>
  7.  
    <artifactId>ueditor</artifactId>
  8.  
    <version>0.0.1-SNAPSHOT</version>
  9.  
    <packaging>jar</packaging>
  10.  
     
  11.  
    <name>ueditor</name>
  12.  
    <description>Demo project for Spring Boot</description>
  13.  
     
  14.  
    <parent>
  15.  
    <groupId>org.springframework.boot</groupId>
  16.  
    <artifactId>spring-boot-starter-parent</artifactId>
  17.  
    <version>1.5.2.RELEASE</version>
  18.  
    <relativePath/> <!-- lookup parent from repository -->
  19.  
    </parent>
  20.  
     
  21.  
    <properties>
  22.  
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  23.  
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
  24.  
    <java.version>1.8</java.version>
  25.  
    <thymeleaf.version>3.0.3.RELEASE</thymeleaf.version>
  26.  
    <thymeleaf-layout-dialect.version>2.1.0</thymeleaf-layout-dialect.version>
  27.  
    </properties>
  28.  
     
  29.  
    <dependencies>
  30.  
    <dependency>
  31.  
    <groupId>org.springframework.boot</groupId>
  32.  
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
  33.  
    </dependency>
  34.  
    <dependency>
  35.  
    <groupId>org.springframework.boot</groupId>
  36.  
    <artifactId>spring-boot-starter-web</artifactId>
  37.  
    </dependency>
  38.  
     
  39.  
    <dependency>
  40.  
    <groupId>org.springframework.boot</groupId>
  41.  
    <artifactId>spring-boot-starter-test</artifactId>
  42.  
    <scope>test</scope>
  43.  
    </dependency>
  44.  
     
  45.  
    <!--UEditor依賴的jar包 -->
  46.  
    <dependency>
  47.  
    <groupId>org.json</groupId>
  48.  
    <artifactId>json</artifactId>
  49.  
    </dependency>
  50.  
    <dependency>
  51.  
    <groupId>commons-fileupload</groupId>
  52.  
    <artifactId>commons-fileupload</artifactId>
  53.  
    <version>1.3.2</version>
  54.  
    </dependency>
  55.  
    <dependency>
  56.  
    <groupId>commons-codec</groupId>
  57.  
    <artifactId>commons-codec</artifactId>
  58.  
    <version>1.9</version>
  59.  
    </dependency>
  60.  
    </dependencies>
  61.  
     
  62.  
    <build>
  63.  
    <plugins>
  64.  
    <plugin>
  65.  
    <groupId>org.springframework.boot</groupId>
  66.  
    <artifactId>spring-boot-maven-plugin</artifactId>
  67.  
    </plugin>
  68.  
    </plugins>
  69.  
    </build>
  70.  
     
  71.  
     
  72.  
    </project>
6.照着源碼裏的controller.jsp.依樣畫葫蘆,寫入UEditorController類,映射路徑爲config。
  1.  
    package com.example;
  2.  
     
  3.  
    import com.baidu.ueditor.ActionEnter;
  4.  
    import org.springframework.stereotype.Controller;
  5.  
    import org.springframework.web.bind.annotation.RequestMapping;
  6.  
     
  7.  
    import javax.servlet.http.HttpServletRequest;
  8.  
    import javax.servlet.http.HttpServletResponse;
  9.  
    import java.io.IOException;
  10.  
    import java.io.PrintWriter;
  11.  
     
  12.  
    /**
  13.  
    * Created by ldb on 2017/4/9.
  14.  
    */
  15.  
    @Controller
  16.  
    public class UEditorController {
  17.  
     
  18.  
     
  19.  
    @RequestMapping("/")
  20.  
    private String showPage(){
  21.  
    return "index";
  22.  
    }
  23.  
     
  24.  
    @RequestMapping(value="/config")
  25.  
    public void config(HttpServletRequest request, HttpServletResponse response) {
  26.  
    response.setContentType( "application/json");
  27.  
    String rootPath = request.getSession().getServletContext().getRealPath( "/");
  28.  
    try {
  29.  
    String exec = new ActionEnter(request, rootPath).exec();
  30.  
    PrintWriter writer = response.getWriter();
  31.  
    writer.write(exec);
  32.  
    writer.flush();
  33.  
    writer.close();
  34.  
    } catch (IOException e) {
  35.  
    e.printStackTrace();
  36.  
    }
  37.  
     
  38.  
    }
  39.  
    }
7.一步一步debug,發現沒法加載config.json文件。此時修改ConfigManage類的getConfigPath()方法。以下:

 

  1.  
    package com.baidu.ueditor;
  2.  
     
  3.  
    import com.baidu.ueditor.define.ActionMap;
  4.  
    import org.json.JSONArray;
  5.  
    import org.json.JSONObject;
  6.  
     
  7.  
    import java.io.*;
  8.  
    import java.net.URISyntaxException;
  9.  
    import java.util.HashMap;
  10.  
    import java.util.Map;
  11.  
     
  12.  
    /**
  13.  
    * 配置管理器
  14.  
    * @author hancong03@baidu.com
  15.  
    *
  16.  
    */
  17.  
    public final class ConfigManager {
  18.  
     
  19.  
    private final String rootPath;
  20.  
    private final String originalPath;
  21.  
    private final String contextPath;
  22.  
    private static final String configFileName = "config.json";
  23.  
    private String parentPath = null;
  24.  
    private JSONObject jsonConfig = null;
  25.  
    // 塗鴉上傳filename定義
  26.  
    private final static String SCRAWL_FILE_NAME = "scrawl";
  27.  
    // 遠程圖片抓取filename定義
  28.  
    private final static String REMOTE_FILE_NAME = "remote";
  29.  
     
  30.  
    /*
  31.  
    * 經過一個給定的路徑構建一個配置管理器, 該管理器要求地址路徑所在目錄下必須存在config.properties文件
  32.  
    */
  33.  
    private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {
  34.  
     
  35.  
    rootPath = rootPath.replace( "\\", "/" );
  36.  
     
  37.  
    this.rootPath = rootPath;
  38.  
    this.contextPath = contextPath;
  39.  
     
  40.  
    if ( contextPath.length() > 0 ) {
  41.  
    this.originalPath = this.rootPath + uri.substring( contextPath.length() );
  42.  
    } else {
  43.  
    this.originalPath = this.rootPath + uri;
  44.  
    }
  45.  
     
  46.  
    this.initEnv();
  47.  
     
  48.  
    }
  49.  
     
  50.  
    /**
  51.  
    * 配置管理器構造工廠
  52.  
    * @param rootPath 服務器根路徑
  53.  
    * @param contextPath 服務器所在項目路徑
  54.  
    * @param uri 當前訪問的uri
  55.  
    * @return 配置管理器實例或者null
  56.  
    */
  57.  
    public static ConfigManager getInstance ( String rootPath, String contextPath, String uri ) {
  58.  
     
  59.  
    try {
  60.  
    return new ConfigManager(rootPath, contextPath, uri);
  61.  
    } catch ( Exception e ) {
  62.  
    return null;
  63.  
    }
  64.  
     
  65.  
    }
  66.  
     
  67.  
    // 驗證配置文件加載是否正確
  68.  
    public boolean valid () {
  69.  
    return this.jsonConfig != null;
  70.  
    }
  71.  
     
  72.  
    public JSONObject getAllConfig () {
  73.  
     
  74.  
    return this.jsonConfig;
  75.  
     
  76.  
    }
  77.  
     
  78.  
    public Map<String, Object> getConfig ( int type ) {
  79.  
     
  80.  
    Map<String, Object> conf = new HashMap<String, Object>();
  81.  
    String savePath = null;
  82.  
     
  83.  
    switch ( type ) {
  84.  
     
  85.  
    case ActionMap.UPLOAD_FILE:
  86.  
    conf.put( "isBase64", "false" );
  87.  
    conf.put( "maxSize", this.jsonConfig.getLong( "fileMaxSize" ) );
  88.  
    conf.put( "allowFiles", this.getArray( "fileAllowFiles" ) );
  89.  
    conf.put( "fieldName", this.jsonConfig.getString( "fileFieldName" ) );
  90.  
    savePath = this.jsonConfig.getString( "filePathFormat" );
  91.  
    break;
  92.  
     
  93.  
    case ActionMap.UPLOAD_IMAGE:
  94.  
    conf.put( "isBase64", "false" );
  95.  
    conf.put( "maxSize", this.jsonConfig.getLong( "imageMaxSize" ) );
  96.  
    conf.put( "allowFiles", this.getArray( "imageAllowFiles" ) );
  97.  
    conf.put( "fieldName", this.jsonConfig.getString( "imageFieldName" ) );
  98.  
    savePath = this.jsonConfig.getString( "imagePathFormat" );
  99.  
    break;
  100.  
     
  101.  
    case ActionMap.UPLOAD_VIDEO:
  102.  
    conf.put( "maxSize", this.jsonConfig.getLong( "videoMaxSize" ) );
  103.  
    conf.put( "allowFiles", this.getArray( "videoAllowFiles" ) );
  104.  
    conf.put( "fieldName", this.jsonConfig.getString( "videoFieldName" ) );
  105.  
    savePath = this.jsonConfig.getString( "videoPathFormat" );
  106.  
    break;
  107.  
     
  108.  
    case ActionMap.UPLOAD_SCRAWL:
  109.  
    conf.put( "filename", ConfigManager.SCRAWL_FILE_NAME );
  110.  
    conf.put( "maxSize", this.jsonConfig.getLong( "scrawlMaxSize" ) );
  111.  
    conf.put( "fieldName", this.jsonConfig.getString( "scrawlFieldName" ) );
  112.  
    conf.put( "isBase64", "true" );
  113.  
    savePath = this.jsonConfig.getString( "scrawlPathFormat" );
  114.  
    break;
  115.  
     
  116.  
    case ActionMap.CATCH_IMAGE:
  117.  
    conf.put( "filename", ConfigManager.REMOTE_FILE_NAME );
  118.  
    conf.put( "filter", this.getArray( "catcherLocalDomain" ) );
  119.  
    conf.put( "maxSize", this.jsonConfig.getLong( "catcherMaxSize" ) );
  120.  
    conf.put( "allowFiles", this.getArray( "catcherAllowFiles" ) );
  121.  
    conf.put( "fieldName", this.jsonConfig.getString( "catcherFieldName" ) + "[]" );
  122.  
    savePath = this.jsonConfig.getString( "catcherPathFormat" );
  123.  
    break;
  124.  
     
  125.  
    case ActionMap.LIST_IMAGE:
  126.  
    conf.put( "allowFiles", this.getArray( "imageManagerAllowFiles" ) );
  127.  
    conf.put( "dir", this.jsonConfig.getString( "imageManagerListPath" ) );
  128.  
    conf.put( "count", this.jsonConfig.getInt( "imageManagerListSize" ) );
  129.  
    break;
  130.  
     
  131.  
    case ActionMap.LIST_FILE:
  132.  
    conf.put( "allowFiles", this.getArray( "fileManagerAllowFiles" ) );
  133.  
    conf.put( "dir", this.jsonConfig.getString( "fileManagerListPath" ) );
  134.  
    conf.put( "count", this.jsonConfig.getInt( "fileManagerListSize" ) );
  135.  
    break;
  136.  
     
  137.  
    }
  138.  
     
  139.  
    conf.put( "savePath", savePath );
  140.  
    conf.put( "rootPath", this.rootPath );
  141.  
     
  142.  
    return conf;
  143.  
     
  144.  
    }
  145.  
     
  146.  
    private void initEnv () throws FileNotFoundException, IOException {
  147.  
     
  148.  
    File file = new File( this.originalPath );
  149.  
     
  150.  
    if ( !file.isAbsolute() ) {
  151.  
    file = new File( file.getAbsolutePath() );
  152.  
    }
  153.  
     
  154.  
    this.parentPath = file.getParent();
  155.  
     
  156.  
    String configContent = this.readFile( this.getConfigPath() );
  157.  
     
  158.  
    try{
  159.  
    JSONObject jsonConfig = new JSONObject( configContent );
  160.  
    this.jsonConfig = jsonConfig;
  161.  
    } catch ( Exception e ) {
  162.  
    this.jsonConfig = null;
  163.  
    }
  164.  
     
  165.  
    }
  166.  
     
  167.  
     
  168.  
    private String getConfigPath () {
  169.  
    //return this.parentPath + File.separator + ConfigManager.configFileName;
  170.  
    try {
  171.  
    //獲取classpath下的config.json路徑
  172.  
    return this.getClass().getClassLoader().getResource("config.json").toURI().getPath();
  173.  
    } catch (URISyntaxException e) {
  174.  
    return null;
  175.  
    }
  176.  
    }
  177.  
     
  178.  
    private String[] getArray ( String key ) {
  179.  
     
  180.  
    JSONArray jsonArray = this.jsonConfig.getJSONArray( key );
  181.  
    String[] result = new String[ jsonArray.length() ];
  182.  
     
  183.  
    for ( int i = 0, len = jsonArray.length(); i < len; i++ ) {
  184.  
    result[i] = jsonArray.getString( i );
  185.  
    }
  186.  
     
  187.  
    return result;
  188.  
     
  189.  
    }
  190.  
     
  191.  
    private String readFile ( String path ) throws IOException {
  192.  
     
  193.  
    StringBuilder builder = new StringBuilder();
  194.  
     
  195.  
    try {
  196.  
     
  197.  
    InputStreamReader reader = new InputStreamReader( new FileInputStream( path ), "UTF-8" );
  198.  
    BufferedReader bfReader = new BufferedReader( reader );
  199.  
     
  200.  
    String tmpContent = null;
  201.  
     
  202.  
    while ( ( tmpContent = bfReader.readLine() ) != null ) {
  203.  
    builder.append( tmpContent );
  204.  
    }
  205.  
     
  206.  
    bfReader.close();
  207.  
     
  208.  
    } catch ( UnsupportedEncodingException e ) {
  209.  
    // 忽略
  210.  
    }
  211.  
     
  212.  
    return this.filter( builder.toString() );
  213.  
     
  214.  
    }
  215.  
     
  216.  
    // 過濾輸入字符串, 剔除多行註釋以及替換掉反斜槓
  217.  
    private String filter ( String input ) {
  218.  
     
  219.  
    return input.replaceAll( "/\\*[\\s\\S]*?\\*/", "" );
  220.  
     
  221.  
    }
  222.  
     
  223.  
    }
this.getClass().getClassLoader().getResource("config.json").toURI().getPath(); 
此處須要先轉爲URI再getPath(),不然若是你的項目路徑帶空格或者帶中文則沒法讀取到文件

 

8.運行項目路徑http://localhost:8080/config?action=config,以下圖顯示則表示可讀取到config.json文件linux

 

9.此時點擊上傳圖片顯示 以下android

 

提示未找到上傳數據。繼續一步步debug,發如今BinaryUploader類居然沒法獲取到字節流

 

google獲得緣由是由於SpringMVC框架對含字節流的request進行了處理,此處傳的是處理過的request,故獲取不到字節流。此時採用SpringMVC框架的解析器multipartResolver。修改源碼以下:

  1.  
    package com.baidu.ueditor.upload;
  2.  
     
  3.  
    import com.baidu.ueditor.PathFormat;
  4.  
    import com.baidu.ueditor.define.AppInfo;
  5.  
    import com.baidu.ueditor.define.BaseState;
  6.  
    import com.baidu.ueditor.define.FileType;
  7.  
    import com.baidu.ueditor.define.State;
  8.  
    import org.apache.commons.fileupload.servlet.ServletFileUpload;
  9.  
    import org.springframework.web.multipart.MultipartFile;
  10.  
    import org.springframework.web.multipart.MultipartHttpServletRequest;
  11.  
     
  12.  
    import javax.servlet.http.HttpServletRequest;
  13.  
    import java.io.IOException;
  14.  
    import java.io.InputStream;
  15.  
    import java.util.Arrays;
  16.  
    import java.util.List;
  17.  
    import java.util.Map;
  18.  
     
  19.  
    public class BinaryUploader {
  20.  
     
  21.  
    public static final State save(HttpServletRequest request,
  22.  
    Map<String, Object> conf) {
  23.  
    // FileItemStream fileStream = null;
  24.  
    // boolean isAjaxUpload = request.getHeader( "X_Requested_With" ) != null;
  25.  
     
  26.  
    if (!ServletFileUpload.isMultipartContent(request)) {
  27.  
    return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
  28.  
    }
  29.  
     
  30.  
    // ServletFileUpload upload = new ServletFileUpload(
  31.  
    // new DiskFileItemFactory());
  32.  
    //
  33.  
    // if ( isAjaxUpload ) {
  34.  
    // upload.setHeaderEncoding( "UTF-8" );
  35.  
    // }
  36.  
     
  37.  
    try {
  38.  
    // FileItemIterator iterator = upload.getItemIterator(request);
  39.  
    //
  40.  
    // while (iterator.hasNext()) {
  41.  
    // fileStream = iterator.next();
  42.  
    //
  43.  
    // if (!fileStream.isFormField())
  44.  
    // break;
  45.  
    // fileStream = null;
  46.  
    // }
  47.  
    //
  48.  
    // if (fileStream == null) {
  49.  
    // return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
  50.  
    // }
  51.  
    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
  52.  
    MultipartFile multipartFile = multipartRequest.getFile(conf.get( "fieldName").toString());
  53.  
    if(multipartFile==null){
  54.  
    return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
  55.  
    }
  56.  
     
  57.  
    String savePath = (String) conf.get( "savePath");
  58.  
    //String originFileName = fileStream.getName();
  59.  
    String originFileName = multipartFile.getOriginalFilename();
  60.  
    String suffix = FileType.getSuffixByFilename(originFileName);
  61.  
     
  62.  
    originFileName = originFileName.substring( 0,
  63.  
    originFileName.length() - suffix.length());
  64.  
    savePath = savePath + suffix;
  65.  
     
  66.  
    long maxSize = ((Long) conf.get("maxSize")).longValue();
  67.  
     
  68.  
    if (!validType(suffix, (String[]) conf.get("allowFiles"))) {
  69.  
    return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
  70.  
    }
  71.  
     
  72.  
    savePath = PathFormat.parse(savePath, originFileName);
  73.  
     
  74.  
    String physicalPath = (String) conf.get( "rootPath") + savePath;
  75.  
     
  76.  
    //InputStream is = fileStream.openStream();
  77.  
    InputStream is = multipartFile.getInputStream();
  78.  
    State storageState = StorageManager.saveFileByInputStream(is,
  79.  
    physicalPath, maxSize);
  80.  
    is.close();
  81.  
     
  82.  
    if (storageState.isSuccess()) {
  83.  
    storageState.putInfo( "url", PathFormat.format(savePath));
  84.  
    storageState.putInfo( "type", suffix);
  85.  
    storageState.putInfo( "original", originFileName + suffix);
  86.  
    }
  87.  
     
  88.  
    return storageState;
  89.  
    // } catch (FileUploadException e) {
  90.  
    // return new BaseState(false, AppInfo.PARSE_REQUEST_ERROR);
  91.  
    } catch (IOException e) {
  92.  
    }
  93.  
    return new BaseState(false, AppInfo.IO_ERROR);
  94.  
    }
  95.  
     
  96.  
    private static boolean validType(String type, String[] allowTypes) {
  97.  
    List<String> list = Arrays.asList(allowTypes);
  98.  
     
  99.  
    return list.contains(type);
  100.  
    }
  101.  
    }

 

此時進行上傳圖片,已經可以成功上傳了。

 

 

10.但是圖片究竟上傳到哪裏了呢?繼續一步步debug發現,上傳到如圖路徑

 

如圖路徑爲tomcat緩存路徑,只要重啓下tomcat該文件就會被刪除。咱們須要將其存儲到磁盤中。此時修改config.json文件。

 

紅色箭頭爲修改處。我須要將文件存儲到E:/image/**下,此處我多添加了basePath,是想把視頻、音樂等靜態資源都存儲到E盤。因爲添加了basePath,須要修改配置。經過debug來到ConfigManage

 

添加紅色箭頭代碼,將basePath塞進配置文件裏。以後繼續來到上傳文件類BinaryUploader,修改以下代碼:

 

運行項目,點擊添加圖片。打開E盤的image目錄,如圖,成功上傳到E盤對應路徑

 

11.打開瀏覽器,發現頁面沒法加載圖片。以下圖:

 

打開瀏覽器調試器。如圖

 

沒法獲取到圖片。這是固然的,由於咱們把圖片存在E盤了,而spring並無對E盤目錄進行映射。此時咱們加入路徑映射。打開application.properties文件,添加以下代碼

web.upload-path=E:/
spring.mvc.static-path-pattern=/** spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${web.upload-path}

此時從新運行項目,點擊上傳圖片,圖片已經可以正常顯示了。

 

 

12.至此,SpringBoot整合UEditor應該完了吧。別急,SpringBoot主張打包成Jar包運行,咱們用Maven來打包運行試試

 

java -jar 

打開項目地址,點擊上傳圖片,發現居然上傳不了了??!!

 

這是怎麼回事呢?爲何打成Jar包後就沒法上傳圖片了呢。通過不斷的debug和google。。發現了在Jar包裏沒法以ClassLoader.getResource().getPath()得到的路徑讀取文件,得用Class類的getResourceAsStream()來讀取。具體博文以下:

http://hxraid.iteye.com/blog/483115?page=3#comments

13.那麼咱們就來修改源碼,改爲getResourceAsStream讀取config.json文件吧。打開ConfigManager類,修改initEnv方法

  1.  
    private void initEnv () throws FileNotFoundException, IOException {
  2.  
     
  3.  
    File file = new File( this.originalPath );
  4.  
     
  5.  
    if ( !file.isAbsolute() ) {
  6.  
    file = new File( file.getAbsolutePath() );
  7.  
    }
  8.  
     
  9.  
    this.parentPath = file.getParent();
  10.  
     
  11.  
    //String configContent = this.readFile( this.getConfigPath() );
  12.  
    String configContent = this.filter(IOUtils.toString(this.getClass().getClassLoader().getResourceAsStream("config.json")));
  13.  
     
  14.  
    try{
  15.  
    JSONObject jsonConfig = new JSONObject( configContent );
  16.  
    this.jsonConfig = jsonConfig;
  17.  
    } catch ( Exception e ) {
  18.  
    this.jsonConfig = null;
  19.  
    }
  20.  
     
  21.  
    }

14. ok了,再次打包,運行項目

 

 

 

成功了!!!

 

項目源碼:https://github.com/llldddbbb/ueditor-test

本次教程到此結束。謝謝你們

  • weixin_42811536
    木丁一:  "basePath": "H:/", /* 本地文件保存的根路徑 */ 這裏添加了basePath 配置文件也作了映射 仍是沒法回顯 前端返回的url裏 只有imagePathFormat配置的路徑 basePath下的路徑沒有返回 全部圖片沒法回顯 請大神賜教(2周前#23樓)
    0
  • qq_40002084
    sokumakun:  做者你好,我想問一下那個/config是幹什麼的,不太懂(1個月前#22樓)
    0
  • jameszxl
    jameszxl:  博主,我對E盤目錄進行映射後,前臺仍是不顯示!!! http://localhost:8080/image/20180609/1528537113706061410.jpg(10個月前#21樓)查看回復(1)
    0
  • baidu_35874918
    baidu_35874918:  很好
    1.  
       
    2.  
      File file = new File&#40; this.originalPath &#41;;
    3.  
       
    (6個月前#20樓)
    0
  • qq_33051469
    qq_33051469:  多圖上傳中的在線管理要怎麼顯示圖片?(6個月前#18樓)
    0
  • fishoflove
    醤油様:  能夠很強大,改源碼要去官方下載源碼,直接複製到項目裏面,不用導入他打的jar包,多圖上傳裏面的在線管理也要相應的改下,否則進去沒貨~ [/code](8個月前#15樓)
    0
  • lisunai
    lisunai:  樓主 怎麼整合到項目 不要另外建項目(9個月前#13樓)
    0
  • qq_36685898
    qq_36685898:  我給springboot項目里加UEditor富文本編輯器,當我點擊上傳單圖和多圖時候,後臺不會走UEditorController類下的config方法斷點,請問我是哪裏配置出錯了....我qq1395673277(9個月前#12樓)
    0
  • qq_14811757
    帥氣十足的安哥:  經過一個給定的路徑構建一個配置管理器, 該管理器要求地址路徑所在目錄下必須存在config.properties文件 大佬,這句話是什麼意思,我按照你的弄了,管理器好像沒起做用,是否是差這個配置文件啊(9個月前#11樓)
    0
  • huangyuehong914
    -白日夢想家-:  博主,有個問題,你這邊源碼是怎麼進行修改的,是新建一個同名類去覆蓋嗎?(10個月前#10樓)
    0

SpringBoot 整合 ueditor

05-10
SpringBoot 整合ueditor,包括控制器,及前臺頁面內容都有。
下載
 

SpringBoot整合UEditor教程 - qq_38091831的博客 - CSDN博客

10-17

很詳細的SpringBoot整合UEditor教程 04-10 1.4萬 UEditor只提供JSP版本的後端...來自: 小寶的博客 spring boot 、springMVC環境集成百度ueditor富文本編輯器,使用...

springboot集成ueditor - liubang159的博客 - CSDN博客

10-23

很詳細的SpringBoot整合UEditor教程 04-10 1.4萬 UEditor只提供JSP版本的後端...來自: 小寶的博客 百度富文本編輯器Ueditor 集成springboot(不修改源碼) 02-...

springboot集成ueditor

09-15
包含springboot集成ueditor文檔以及解決ueditor上傳圖片並插入到文本框中的問題。能夠進行批量上傳圖片。 包含springboot集成ueditor文檔以及解決ueditor上傳圖片
下載

springboot+maven+ueditor - caibird_li的博客 - CSDN博客

11-21

headers = "Accept=application/json") public String ueditor(@RequestParam("action...很詳細的SpringBoot整合UEditor教程 - 小寶的博客 04-10 1.6萬 UEditor只...

關於springboot與ueditor的整合。 - sinat_36803510的..._CSDN博客

4-5

很詳細的SpringBoot整合UEditor教程 04-10 閱讀數 2萬+ UEditor只提供JSP版本...博文 來自: 小寶的博客 百度富文本編輯器Ueditor 集成springboot(不修改源碼) ...

Ueditor使用方法,手把手教你

閱讀數 1萬+

富文本編輯器ueditor的使用方法博文來自: 陽水平的博客

SpringBoot接入Ueditor編輯器 - 在下的博客 - CSDN博客

11-16

不少時候咱們須要使用到富文本編輯器,這裏我就分享一下SpringBoot接入百度的UEditor...很詳細的SpringBoot整合UEditor教程- 小寶的博客 04-10 1.6萬 UEditor只提供...

springboot整合ueditor 後端篇(簡潔版) - xu1204013031的博客 -...

3-29

很詳細的SpringBoot整合UEditor教程 04-10 閱讀數 2萬+ UEditor只提供JSP版本...博文 來自: 小寶的博客 springboot 集成百度編輯器ueditor 07-27 閱讀數 2273...

spring Boot + Ueditor整合 - 蕭楓的博客 - CSDN博客

4-5

很詳細的SpringBoot整合UEditor教程 04-10 閱讀數 2萬+ UEditor只提供JSP版本...博文 來自: 小寶的博客 百度富文本編輯器Ueditor 集成springboot(不修改源碼) ...

springboot整合ueditor 前端篇 - xu1204013031的博客 - CSDN博客

10-26

很詳細的SpringBoot整合UEditor教程 04-10 1.5萬 UEditor只提供JSP版本的後端...來自: 小寶的博客 編輯器ueditor和springboot 的整合 08-21 3443 1.先導入...

晚上白開水+它,胖到160斤都能瘦,後悔沒早知道丙申科技 · 獵媒

編輯器ueditor和springboot 的整合 - 白天不懂夜的黑的..._CSDN博客

10-28

很詳細的SpringBoot整合UEditor教程 04-10 1.5萬 UEditor只提供JSP版本的後端入口...來自: 小寶的博客 spring Boot + Ueditor整合 09-26 6546 前陣子因項目...

SpringBoot整合UEditor文本編輯器

04-24
修改config.json文件的圖片存儲路徑便可 運行項目.訪問路徑localhost:8080/
下載
 

第三方插件的引用(1) : SSM,springboot 引入ueditor及圖片上傳阿里雲OS和展現

閱讀數 226

1.博文來自: Lxinccode的博客

老中醫說:白開水+它,喝完排出「巨便」大肚子也沒了!青春美 · 獵媒
 
脫髮的元兇居然是這個!學會這個方法,頭髮瘋長!康納 · 獵媒

基於springboot+vue+element+ueditor實現先後端分離的富文本框實現

閱讀數 6737

springboot+vue+ueditor的整合博文來自: Simle_MiMI的博客

springboot整合ueditor源碼(本身寫,測試可用,不須要修改ueditor源碼)

01-12
springboot和ueditor的整合,本身寫完測試過能夠用,下載下來只須要修改index.html中的地址就能夠。具體搭建的步驟在:https://www.jianshu.com/p/006e6
下載

連續特徵離散化和歸一化

閱讀數 3萬+

連續特徵進行離散化處理。博文來自: hero_fantao的專欄

碼農必看:各大平臺的推薦系統原來是靠它完成的,太牛了

第四範式先薦幫助客戶從0到1搭建推薦系統,顯著提高用戶活躍,留存,觀看時長等重要業務指標

spring boot 整合ueditor的問題

11-22

如題,spring boot 整合ueditor進行圖片上傳,搞了半天,惟一的收穫就是能打開前端的jsp頁面,而後把圖片上傳,可是由於須要把圖片的信息存到mysql中,因此後臺controller須要論壇

如何快速提高個性化推薦效果?

先薦推薦系統適合首頁,信息流,內容詳情頁等場景,支持網頁, APP,小程序,快應用,1分鐘安裝5分鐘上線,支持人工干預推薦

第四範式發佈先薦推薦系統,幫助300+媒體平臺實現內容升級

先薦推薦系統由國際頂尖智能推薦團隊研發,三步便可完成接入,毫秒級數據更新,支持PC,WAP, APP全平臺接入

ODAC (odp.net) 從開發到部署

閱讀數 1萬+

test博文來自: 我想我是海 冬天的大海 心情隨風輕擺

相關文章
相關標籤/搜索