spingboot实现UEditor文件上传

spingboot2.x整合UEditor1.4.3.3（jsp）

本文将忽略ueditor(UE)的展现(可参考官方demo)，着重介绍文件上传。（“umeditor测试页”？为什么不用UM呢，因为最后更新1.2.3版本问题有点多。。）

下图为UEditor的jsp版的文件目录，将以此为基础展开介绍：

UEditor实现文件上传的理论实现

理论上，将官网上下载的ueditor包放到工程的resources/js下，再将ueditor1.4.3.3/jsp/lib下的相关jar引入到工程下（buildpath或者maven）。
准备工作做完之后初始化UE：

	var ue = UE.getEditor('editorTest');

初始化的过程中，UE会读取ueditor1.4.3.3/ueditor.config.js文件下的serverUrl找到jsp/controller.jsp：

这里相当于一个controller请求，是下一节自定义上传接口的基础。看一下controller.jsp的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	import="com.baidu.ueditor.ActionEnter"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%

    request.setCharacterEncoding( "utf-8" );
	response.setHeader("Content-Type" , "text/html");
	
	String rootPath = application.getRealPath( "/" );
	
	out.write( new ActionEnter( request, rootPath ).exec() );
	
%>

com.baidu.ueditor.ActionEnter就是js/ueditor1.4.3.3/jsp/lib/ueditor-1.1.2.jar里的方法，这里ActionEnter是配置、图片、视频等上传的统一入口。
先看下初始化的请求地址http://localhost:8081/qishi/js/controller.jsp?action=config&&noCache=1559371676072,注意这里的action参数，是区分读取配置还是上传文件用的。见js/ueditor1.4.3.3/ueditor.all.js中的注释：

完全一致！默认是config。
而初始化请求controller.jsp?action=config返回的是json传，即/js/ueditor1.4.3.3/jsp/config.jsonl里去掉注释的内容，而这个配置就是后面文件上传方法所依赖的。比如点击上传图片按钮时，请求地址的action参数就是替换成config.json里imageActionName的值uploadimage。
到这里，主要的上传过程和controller.jsp，ueditor-1.1.2.jar，ueditor.config.js和config.json主要文件的关系已经明了了。
但是，，，说到springboot2.x，她默认已经不支持jsp，特别是你已经集成thymeleaf或者ftl再用jsp多少有点，有点难受？所以这篇文章还有下文自定义上传接口。

UEditor实现文件上传用自定义controller代替jsp

首先很负责的说一句不负责任的话，上面的理论我并没有实现⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄。因为我真的不想就为了访问controller.jsp给springboot增加jsp支持(╯°口°)╯(┴—┴。
但是上面的理论是自定义实现的基础，那么开始真正实现了的UE文件上传介绍。

首先就是替换ueditor.config.js文件下的serverUrl指向自定义的controller方法，根据官方注释提醒，采用//myProject/ueditor的形式：

然后是后台controller方法：

package com.hhss.qishi.controller.upload.ueditor;

import com.baidu.ueditor.ActionEnter;
import org.springframework.context.annotation.Scope;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * 百度UEditor 文件上传控制器
 *
 * @Author :Administrator
 * @Description
 * @Date :2019-05-30 16:25.
 */
@RestController
@RequestMapping("js/ueditor1.4.3.3/jsp")
public class UEditorController {

	@RequestMapping(value = "/config")
	public void config(HttpServletRequest request, HttpServletResponse response) {

		response.setContentType("application/json");

		/*String rootPath = request.getSession()
				.getServletContext().getRealPath("/");*/
        String rootPath = this.getClass().getResource("/").getPath().replaceAll("^\\/", "");

		try {
			String exec = new ActionEnter(request, rootPath).exec();
			PrintWriter writer = response.getWriter();
			writer.write(exec);
			writer.flush();
			writer.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}

注意这里controller的地址/js/ueditor1.4.3.3/jsp/config和rootPath的生成方法。先来看下ueditor-1.1.2.jar是怎么寻找config.json配置文件的：

可以看到ConfigManager的构造器的rootPath就对应rootPath的生成方法，而uri就对应controller的地址/js/ueditor1.4.3.3/jsp/config，contextPath就是工程名/qishi。所以为了准确定位到resources/js/ueditor1.4.3.3/jsp/config.json文件，UEditorController做如上上图的处理。当然这里可以把config.json放到更容易定位的地方，我只是暂时不想动ueditor的目录结构。

访问后成功返回congfig.json，说明这里已经配置初始化成功了。由于上传图片和初始配置是一个接口，支持action=uploadimage。所以理论上上传图片也可以用了，但在点击上传图片之前在做一些修改。
1）配置config.json的imageUrlPrefix参数（最后图片的回显地址是imageUrlPrefix+imagePathFormat）：

2）MultipartResolver 和ServletFileUpload冲突的问题。需要在增加配置spring.servlet.multipart.enabled=false(原spring.http.multipart.enabled=false的配置方式已失效)

重写CommonsMultipartResolver 的isMultipart方法。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

import javax.servlet.http.HttpServletRequest;


@Configuration
public class CustomizeMultipartResolver extends CommonsMultipartResolver {

org.springframework.web.multipart.commons.CommonsMultipartResolver#isMultipart(javax.servlet.http.HttpServletRequest)
    */
   @Override
   public boolean isMultipart(HttpServletRequest request) {
       // 过滤ueditor上传文件接口  兼容MultipartResolver 或者 ServletFileUpload
       if (request.getRequestURI().contains("js/ueditor1.4.3.3/jsp/config")) {
           return false;
       }
       return super.isMultipart(request);
   }

}

最后点击上传图片,效果如下：

最后的最后到这还有一些工作没有做，还有很多硬编码、图片上传的地址配置化等。
ps：如果要完全脱离ueditor-1.1.2.jar，实现自定义的后端文件上传怎么做呢。这篇文章提供了思路。https://www.cnblogs.com/liter7/p/7745606.html
整理如下：

1. UEditorController直接放回字符串，跳过验证。这里我觉得已经没必要返回配置了。
2. 自定义图片上传路径，可以在ueditor.all.js的8138行做如下修改减少重复配置

   /* 重新指定上传地址 添加by zcc */
   UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
   UE.Editor.prototype.getActionUrl = function(action) {
       let me = this;
       let uploadFilePath = me.getOpt('uploadFilePath');
       if (uploadFilePath && (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage')) {
           return uploadFilePath; //在这里返回我们实际的上传图片地址
       } else {
           return this._bkGetActionUrl.call(this, action);
       }
   }

有个uploadFilePath参数是方便修改配置在了ueditor.config.js里：

3. 最后就是写接收图片的controller了，这里就不展开了。

本文至此全部结束_(:3」∠)_。