您的位置: 首页  >  文章  >  解决spring 类型项目 ueditor富文本编辑器上传图片等文件失败问题

解决spring 类型项目 ueditor富文本编辑器上传图片等文件失败问题

分类: 文章 • 2022-10-31 09:54:43

工作中需要用到UEditor编辑文本，在与springMVC进行整合时，出现了一些问题，结果导致，在进行图片上传时出现如下提示：
解决spring 类型项目 ueditor富文本编辑器上传图片等文件失败问题
上网查询了很多相关资料，此处简要记录下，防止以后遇到类似问题。

一种方式是直接修改源码，步骤如下：

1、编写controller 如下（该接口是ueditor前后台交互的统一路径） ：
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

package com.test.dcdp.controller;
{captureBefore} [ ]
import java.io.IOException;
import java.io.PrintWriter;
{captureBefore} [ ]
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
{captureBefore} [ ]
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
{captureBefore} [ ]
import com.baidu.ueditor.ActionEnter;
{captureBefore} [ ]
@Controller
@RequestMapping("/ueditor")
public class UeditorController {
{captureBefore} [ ]
    @RequestMapping("/dispatch")
    public void config(HttpServletRequest request,  HttpServletResponse response) {
           // response.setContentType("application/json");
            String rootPath = request.getSession().getServletContext().getRealPath("/");
            response.setHeader("Content-Type" , "text/html");
            try {
                String a = request.getRequestURI();
                    String exec = new ActionEnter(request, rootPath).exec();
                    PrintWriter writer = response.getWriter();
                    writer.write(exec);
                    writer.flush();
                    writer.close();
            } catch (IOException e) {
                    e.printStackTrace();
            }

    }
}

2、修改ueditor的配置文件 ueditor.config.js（指定后台服务器地址）,如下所示

修改前：

1
2
3
4
5
6
7
8
9
10
11
12

var URL = window.UEDITOR_HOME_URL || getUEBasePath();

   /**
    * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
    */
   window.UEDITOR_CONFIG = {

       //为编辑器实例添加一个路径，这个不能被注释
       UEDITOR_HOME_URL: URL

       // 服务器统一请求接口路径
       , serverUrl: URL + "php/controller.php"

修改后 ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

var getRootPath = function (){
       //获取当前网址
       var curWwwPath=window.document.location.href;
       //获取主机地址之后的目录
       var pathName=window.document.location.pathname;

       var pos=curWwwPath.indexOf(pathName);
       //获取主机地址
       var localhostPaht=curWwwPath.substring(0,pos);
       //获取带"/"的项目名，如：/uimcardprj
       var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);

       return(localhostPaht+projectName);
   }
   //获取路径
   var applicationPath = getRootPath();
   var URL = window.UEDITOR_HOME_URL || getUEBasePath();
   var serverURL = applicationPath;

   /**
    * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
    */
   window.UEDITOR_CONFIG = {

       //为编辑器实例添加一个路径，这个不能被注释
       UEDITOR_HOME_URL: URL

       // 服务器统一请求接口路径
       , serverUrl: serverURL + "ueditor/dispatch"

3、修改ueditor源码 ConfigManager.java（指定配置文件路径）.

修改前 ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/*
     * 通过一个给定的路径构建一个配置管理器， 该管理器要求地址路径所在目录下必须存在config.properties文件
     */
    private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {

        rootPath = rootPath.replace( "\\", "/" );

        this.rootPath = rootPath;
        this.contextPath = contextPath;

        if ( contextPath.length() > 0 ) {
            this.originalPath = this.rootPath + uri.substring( contextPath.length() );
        } else {
            this.originalPath = this.rootPath + uri;
        }

        this.initEnv();

    }

修改后 ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/*
   * 通过一个给定的路径构建一个配置管理器， 该管理器要求地址路径所在目录下必须存在config.properties文件
   */
  private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {

      rootPath = rootPath.replace( "\\", "/" );

      this.rootPath = rootPath;
      this.contextPath = contextPath;

      /*if ( contextPath.length() > 0 ) {
          this.originalPath = this.rootPath + uri.substring( contextPath.length() );
      } else {
          this.originalPath = this.rootPath + uri;
      }*/

      this.originalPath = rootPath + "static" + File.separator + "lib" + File.separator +
              "ueditor" + File.separator + "1.4.3" + File.separator + "jsp" + File.separator + "controller.jsp";
      ///EdwManage/src/main/webapp/static/lib/ueditor/1.4.3/jsp/controller.jsp

      this.initEnv();

  }

如上所述，主要修改 originalPath 的路径，否则ueditor的配置文件（ueditor_config.json）路径是错误的（与springMVC整合的情况），之所以向上面那样拼接路径，是因为我的ueditor相关文件拷贝在了（EdwManage/src/main/webapp/static/lib/ueditor/1.4.3/jsp/controller.jsp）路径里。

4、（若未执行该步操作，在选择好图片后，点击上传，将提示 ： “未找到上传文件”）由于上传的文件都会被springmvc的文件上传拦截器拦截，包装，这样百度编辑器接收到文件后不能识别文件格式，因此把spring默认的commonsMultiparResolver，替换成我们自己写的commonsMultiparResolver ，并修改配置文件。

重写CommonsMultipartResolver :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 package com.tianwen.dcdp.common;

import org.springframework.web.multipart.commons.CommonsMultipartResolver;

public class CommonsMultiparResolver extends CommonsMultipartResolver {

    @Override
      public boolean isMultipart(javax.servlet.http.HttpServletRequest request) {
       String uri = request.getRequestURI();
       System.out.println(uri);
       //过滤使用百度UEditor的URI
       if (uri.indexOf("ueditor/dispatch") > 0) {     //此处拦截路径即为上面编写的controller路径
        System.out.println("commonsMultipartResolver 放行");
        return false;
       }
       System.out.println("commonsMultipartResolver 拦截");
       return super.isMultipart(request);
      }
}

 

修改springMVC配置文件spring-mvc.xml ：

1
2
3
4
5
6
7
8
9
10

<!-- 修改为我们重写的CommonsMultiparResolver而不是spring提供的 -->
   <bean id="multipartResolver"
       class="com.tianwen.dcdp.common.CommonsMultiparResolver">
       <!-- 默认编码 -->
       <property name="defaultEncoding" value="utf-8" />
       <!-- 文件大小最大值 -->
       <property name="maxUploadSize" value="10485760000" />
       <!-- 内存中的最大值 -->
       <property name="maxInMemorySize" value="40960" />
   </bean>

5、最后配置上传文件保存目录，修改ueditor配置文件（ueditor_config.json）：

修改如下参数（即配置上传文件的URL路径，若配置不正确，富文本编辑器中将不能正确显示上传的图片）：

1
2

"imageUrlPrefix": "http://localhost:80/EdwManage", /* 图片访问路径前缀 */
"imagePathFormat": "/static/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

此处 imagePathFormat 之所以配置为如上格式，是因为springMVC中，指定了static目录下的资源为静态资源（其他路径都会被springMVC拦截）。

文件默认保存的物理路径为： web应用根路径 + imagePathFormat 。

{yyyy}{mm}{dd} ： 按天分类保存

{time}{rand:6} ： 随机生成文件名

另外还有一种简单的解决办法：

1、新建一web工程(ueditor)。

2、将下载下来的ueditor文件拷贝到新建工程 的webapps目录下,可参考官网介绍。

3、在使用ueditor的工程中，修改ueditor配置文件（ueditor.config.js）如下 ：

1
2
3
4
5
6
7
8
9
10
11
12
13

window.UEDITOR_HOME_URL = "http://localhost/ueditor/";
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();

    /**
     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
     */
    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL

        // 服务器统一请求接口路径
        , serverUrl: URL+ "jsp/controller.jsp"

3、配置上传文件保存路径，修改（ueditor_config.json） ：

1
2

"imageUrlPrefix": "http://localhost:80/ueditor", /* 图片访问路径前缀 */
  "imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

相关推荐