以前传统web工程下使用UEditor是继承ActionEnter实现自己的MyActionEnter来实现自定义文件上传路径的
本文主要是SpringBoot+thymeleaf环境下使用UEditor。
【1】本地环境下不指定上传路径
① 引入pom依赖
<!-- 百度编辑器 --> <dependency> <groupId>com.gitee.qdbp.thirdparty</groupId> <artifactId>ueditor</artifactId> <version>1.4.3.3</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
② 下载UEditor的jsp版本
UEditor官网：https://ueditor.baidu.com/website/index.html
下载地址：https://ueditor.baidu.com/website/download.html
从官网或者其他地方下载下来，然后放入如下路径 /static/common/plugs/ueditor：
当然可以选择其他路径，这里以这个路径为参考。如果你放到其他地方，那么本文描述的其他细节请自行对应修改。
② 修改\static\common\plugs\ueditor\ueditor.config.js
③ 自定义UeditorController
稍微解释下，这里controller拦截的请求/common/plugs/ueditor/jsp/controller其实就是②中ueditor.config.js的serverUrl。
@Controller @RequestMapping("/common/plugs/ueditor/jsp") public class UeditorController { @RequestMapping("/controller") @ResponseBody public void getConfigInfo(HttpServletRequest request, HttpServletResponse response) { response.setContentType("application/json"); String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static"; System.out.println("rootPath:" + rootPath); try { String exec = new ActionEnter(request, rootPath).exec(); System.out.println("exec:" + exec); PrintWriter writer = response.getWriter(); writer.write(exec); writer.flush(); writer.close(); } catch (IOException e) { e.printStackTrace(); } } }
为什么要这么做呢？跟踪其源码可以发现它是根据this.rootPath, this.contextPath, configPath获取配置管理器的—对应config.json。
如果遇到诸如：配置文件初始化失败错误就是config.json拿不到！
com.baidu.ueditor.ActionEnter:
public ActionEnter(IStorageManager storage, HttpServletRequest request, String rootPath, String configPath) { this.request = null; this.rootPath = null; this.contextPath = null; this.actionType = null; this.configManager = null; this.storage = storage; this.request = request; this.rootPath = rootPath; this.actionType = request.getParameter("action"); this.contextPath = request.getContextPath(); if (configPath == null) { configPath = request.getParameter("configPath"); if (configPath == null) { configPath = request.getRequestURI(); } } this.configManager = ConfigManager.getInstance(this.rootPath, this.contextPath, configPath); }
也就是说，如果你参数中没有传configPath，那么它将自动获取request.getRequestURI();–在这里也就是/common/plugs/ueditor/jsp/controller。继续再跟下ConfigManager.getInstance源码如下：
private ConfigManager(String rootPath, String contextPath, String uri) throws FileNotFoundException, IOException { rootPath = rootPath.replace("\\", "/"); this.rootPath = rootPath; if (contextPath.length() > 0 && uri.startsWith(contextPath)) { this.originalPath = this.rootPath + uri.substring(contextPath.length()); } else { this.originalPath = this.rootPath + uri; } this.initEnv(); }
这里也就明朗了，UEditor就是根据originalPath获取到config.json！如果拿不到这玩意，就会报配置错误！
所以其实这中间可操作的地方还有，可以在controller方法中放入configPath！
完成后界面如下：
上传的图片为止如下图所示：
【2】项目打jar部署到服务器
① config.json读取问题
按照【1】配置，这时拿不到config.json。
修改controller如下：
/** * 这里contextPath为空！ */ @Controller @RequestMapping("/common/plugs/ueditor/jsp") public class UeditorController { private static final Logger logger= LoggerFactory.getLogger(UeditorController.class); @Value("${com.jane.configjson.baseFilePath}") private String configJsonPath; @RequestMapping("/controller") @ResponseBody public void getConfigInfo(HttpServletRequest request, HttpServletResponse response) { response.setContentType("application/json"); logger.debug("配置文件配置的configJsonPath："+configJsonPath); String requestURL = request.getRequestURL().toString(); logger.debug("requestURL:"+requestURL); logger.debug("RequestURI:"+request.getRequestURI()); logger.debug("ContextPath:"+request.getContextPath()); String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static"; String configPath=request.getRequestURI(); if(requestURL.contains("127.0.0.1")||requestURL.contains("localhost")||requestURL.contains("192.168")){ logger.debug("本地环境"); }else{ rootPath=configJsonPath; configPath="/test";//这里随便写 logger.debug("服务器环境，请将config.json放到"+rootPath+"的下面！"); } logger.debug("rootPath:" + rootPath); /** * 1.如果ContextPath为空，则rootPath+RequestURI的父级决定config.json位置 * 2.如果ContextPath为空不为空 originalPath = this.rootPath + uri.substring(contextPath.length()); * originalPath.getParentFile()+config.json即为最终完整config.json路径 */ try { String exec = new ActionEnter(new StorageManager(), request, rootPath, configPath).exec(); System.out.println("exec:" + exec); PrintWriter writer = response.getWriter(); writer.write(exec); writer.flush(); writer.close(); } catch (IOException e) { e.printStackTrace(); } } }
然后将config.json放到配置文件中${com.jane.configjson.baseFilePath}的下面：
这个路径就是项目跑的路径：
但是此时还有另外一个问题，图片不能回显！
② 解决图片回显问题
图片上传成功，但是回显不了！
那么这时候就要搞清楚，图片到底保存到了哪里？
继续跟踪源码，图示如下：
很明显了，图片最终路径是rootPath+savePath!rootPath就是我们在controller传进去的，savePath就是UEditor从config.json读取imagePathFormat的值！
服务器验证如下：
而图片回显请求则是savePath+实际保存的文件名！那么很好说了,自定义controller拦截/ueditor/jsp/upload前缀的请求进行文件下载处理即可！
第一步-修改UeditorController
exec方法执行结束后是返回一个json字符串，那么就可以从中对url进行替换。
String exec = new ActionEnter(new StorageManager(), request, rootPath, configPath).exec(); /** * exec:{"state": "SUCCESS","original": "\u5b9e\u9a8c\u75301.jpg","size": "42389","title": "1580809982781059908.jpg", * "type": ".jpg","url": "/ueditor/jsp/upload/image/20200204/1580809982781059908.jpg"} */ System.out.println("exec:" + exec); JSONObject parse = JSON.parseObject(exec); if(parse.containsKey("url")){ String oldUrl = parse.getString("url"); String urlNew="/ueditor/jsp/upload?filePath="+oldUrl; parse.put("url",urlNew); logger.debug("封装后的exec:"+parse); }
第二步-自定义fileController处理上面的urlNew
@Value("${com.jane.configjson.baseFilePath}") private String configJsonPath; @RequestMapping("/ueditor/jsp/upload") public ResponseEntity<byte[]> ueditorfileDown(HttpServletRequest request,String filePath){ logger.debug("filePath:"+filePath); byte [] body = null; String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static"; String requestURL = request.getRequestURL().toString(); if(requestURL.contains("127.0.0.1")||requestURL.contains("localhost")||requestURL.contains("192.168")){ logger.debug("本地环境"); }else{ rootPath=configJsonPath; } String fileUrl=rootPath+ File.separator+filePath; try { //获取到文件流 InputStream in = new FileSystemResource(fileUrl).getInputStream(); body = new byte[in.available()]; in.read(body); } catch (IOException e1) { logger.debug("文件读入出错，文件路径为："+fileUrl); e1.printStackTrace(); } int index = filePath.lastIndexOf("/"); String fileName = filePath.substring(index+1); logger.debug("本次下载的文件为："+fileName); //添加响应头 HttpHeaders headers = new HttpHeaders(); headers.add("Content-Disposition", "attachment;filename="+fileName); headers.setContentType(MediaType.APPLICATION_OCTET_STREAM); HttpStatus statusCode = HttpStatus.OK; ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(body, headers, statusCode); return response; }
最终效果如下图所示：
【3】指定文件上传路径与回显
其实，只要【2】弄清楚了，指定文件上传路径并回显就很简单了。核心要点：rootPath,configPath,savePath以及config.json配置内容！
这里不再赘述！
