SpringBoot整合Ueditor

￡神魔★判官ぃ 2022-12-13 09:55 298阅读 0赞

# 简介 #

本博客实现SpringBoot整合Ueditor的功能，解决图片上传的问题：路径设置、图片大小设置等  
源代码下载地址：[https://download.csdn.net/download/lianghecai52171314/12917676  
][https_download.csdn.net_download_lianghecai52171314_12917676]

# 代码实现 #

## 第一步：新建SpringBoot项目，按如下所示添加依赖： ##

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.json</groupId>
        <artifactId>json</artifactId>
        <version>20190722</version>
    </dependency>
    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3.1</version>
    </dependency>
    <dependency>
        <groupId>commons-codec</groupId>
        <artifactId>commons-codec</artifactId>
        <version>1.9</version>
    </dependency>
    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.4</version>
    </dependency>

## 第二步：下载Ueditor源代码并将打包后得到的dist目录中内容拷贝到SpringBoot项目中。 ##

下载地址：https://github.com/fex-team/ueditor/tree/dev-2.0.0  
![SpringBoot整合Ueditor][SpringBoot_Ueditor]  
**注意**：为了方便，我将config.json放在ueditor的根目录中了。

## 第三步：运行项目，访问路径http://localhost:8080/ueditor/index.html，打开如下页面则成功： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center]

## 第四步：当用户上传的图片太大时，为了不让Ueditor不出现水平滚动轴，可以修改ueditor.all.js文件以及ueditor.all.mini.js文件（选做）： ##

![在这里插入图片描述][20201010193813255.png_pic_center]

## 第五步：修改ueditor.config.js文件，在其中指定Ueditor请求的服务器端的路径： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 1]

## 第六步：创建UEditorController ##

@Controller
    @RequestMapping("/ueditor") 
    public class UEditorController { 
        @RequestMapping(value="/config")
        public void config(HttpServletRequest req,HttpServletResponse resp) { 
            resp.setContentType("application/json");
            String rootPath = req.getSession().getServletContext().getRealPath("/");
            try { 
                String exec = new ActionEnter(request, rootPath).exec();
                PrintWriter writer = resp.getWriter();
                writer.write(exec);
                writer.flush();
                writer.close();
            } catch (IOException e) { 
                e.printStackTrace();
            }
        }
    }

上面请求的完整路径/ueditor/config，对应

## 第七步：修改config.json文件，为其添加一个表示上传资料基本路径的变量basePath。 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 2]

## 第八步：修改BinaryUploader的save()方法的代码如下： ##

public static final State save(HttpServletRequest request,Map<String, Object> conf) { 
        FileItemStream fileStream = null;
        boolean isAjaxUpload = request.getHeader("X_Requested_With") != null;
        if (!ServletFileUpload.isMultipartContent(request)) { 
            return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
        }
        ServletFileUpload upload = new ServletFileUpload(new DiskFileItemFactory());
        if (isAjaxUpload) { 
            upload.setHeaderEncoding("UTF-8");
        }
        try { 
            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
            MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());
            if (multipartFile == null) { 
                return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
            }
    
            String savePath = (String) conf.get("savePath");
            //String originFileName = fileStream.getName();
            String originFileName = multipartFile.getOriginalFilename();
            String suffix = FileType.getSuffixByFilename(originFileName);
    
            originFileName = originFileName.substring(0,
                    originFileName.length() - suffix.length());
            savePath = savePath + suffix;
    
            long maxSize = ((Long) conf.get("maxSize")).longValue();
    
            if (!validType(suffix, (String[]) conf.get("allowFiles"))) { 
                return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
            }
    
            savePath = PathFormat.parse(savePath, originFileName);
    
            String basePath = (String) conf.get("basePath");
            String physicalPath = basePath + savePath;
    
            InputStream is = multipartFile.getInputStream();
            State storageState = StorageManager.saveFileByInputStream(is,
                    physicalPath, maxSize);
            is.close();
    
            if (storageState.isSuccess()) { 
                storageState.putInfo("url", PathFormat.format(savePath));
                storageState.putInfo("type", suffix);
                storageState.putInfo("original", originFileName + suffix);
            }
    
            return storageState;
        }catch (IOException e) { 
        }
        return new BaseState(false, AppInfo.IO_ERROR);
    }

## 第九步：修改ConfigManage类 ##

1、 修改成员变量configFileName的值为config.json的路径值：

private static final String configFileName = "static/ueditor/config.json";

2、 在getConfig()方法的return语句之前添加如下代码：

//将basePath塞进conf
    conf.put("basePath", this.jsonConfig.getString("basePath"));
    conf.put("savePath", savePath);
    conf.put("rootPath", this.rootPath);

3、 为了让项目在打包后能正常够上传文件/图片，修改initEnv()方法用Class类的getResourceAsStream()来读取文件

private void initEnv() throws FileNotFoundException, IOException { 
       File file = new File(this.originalPath);
       if (!file.isAbsolute()) { 
          file = new File(file.getAbsolutePath());
       }
       this.parentPath = file.getParent();
       //String configContent = this.readFile(this.getConfigPath());
       String configContent = this.filter(IOUtils.toString(this.getClass().getClassLoader().getResourceAsStream(configFileName)));
       try { 
          JSONObject jsonConfig = new JSONObject(configContent);
          this.jsonConfig = jsonConfig;
       } catch (Exception e) { 
          this.jsonConfig = null;
       }
    }

4、修改getConfigPath()方法的代码如下：

private String getConfigPath() { 
       try { 
          //获取classpath下的config.json路径
          return this.getClass().getClassLoader().getResource(configFileName).toURI().getPath();
       } catch (URISyntaxException e) { 
          return this.parentPath + File.separator + ConfigManager.configFileName;
       }
    }

## 第十步：设置图片在Ueditor中回显： ##

因为我们把图片存在E盘了，而spring并没有对E盘目录进行映射。只有按如下所示在application.properties文件加入路径映射，上传成功的图片在Ueditor中才才能回显：

spring:
      servlet:
        #设置SpringBoot内置tomcat允许上传图片的大小
        multipart:
          max-file-size: 100MB
          max-request-size: 1000MB
      #路径映射，Ueditor上传图片成功后回显用
      resources:
        static-locations: classpath:static/,file:static/,file:E:/

## 第十一步：运行项目，上传图片，发现成功： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 3]

[https_download.csdn.net_download_lianghecai52171314_12917676]: https://download.csdn.net/download/lianghecai52171314/12917676
[SpringBoot_Ueditor]: /images/20221123/739c06eabca34e32816e5e838d8c655a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/43789a67c19440809be9b5ac63803fec.png
[20201010193813255.png_pic_center]: /images/20221123/e3313a6bc67e4d419f999cdc4c0bc812.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/764393fc95ce4f8786dc4470fef7948b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/f054de40bb5b4d139dbffc7a159cb976.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/947ad6a5d60e446083d14fe45ba2163c.png