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
整理如下:
- UEditorController直接放回字符串,跳过验证。这里我觉得已经没必要返回配置了。
- 自定义图片上传路径,可以在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」∠)_。