UEditor自定义图片/文件上传路径与回显

时间:2024-04-02 20:13:02

本文是基于Windows下Java解决UEditor自定义图片/文件上传路径问题,文件保存在本地磁盘,Tomcat做了虚拟路径映射。本文并未采用官网所示方法:
UEditor自定义图片/文件上传路径与回显

UEditor官网:https://ueditor.baidu.com/website/index.html
下载地址:https://ueditor.baidu.com/website/download.html

UEditor自定义图片/文件上传路径与回显
UEditor入门:http://fex.baidu.com/ueditor/
UEditor自定义图片/文件上传路径与回显
关于如何部署、运行起来等参考官网即可,本文主要解决如何自定义图片上传路径并回显。

【1】下载文件并部署运行

UEditor自定义图片/文件上传路径与回显
为什么还要下载源码?因为要自定义MyActionEnter类。这个类干什么?解决自定义路径的关键!

当第一次创建完项目后,可能如下图所示,此时图片是保存在部署在Tomcat路径下的:
UEditor自定义图片/文件上传路径与回显

图片根路径可能如下所示(eclipse默认部署项目路径):

C:\Users\jianggc\workspace\.metadata\.plugins\
org.eclipse.wst.server.core\tmp1\wtpwebapps\UeditorWeb\

【2】继承ActionEnter实现自己的MyActionEnter

先把下载的源码中的src/com放入项目中,如下所示:
UEditor自定义图片/文件上传路径与回显
UEditor自定义图片/文件上传路径与回显
主要就是重写invoke方法,如下所示:

UEditor自定义图片/文件上传路径与回显
PS: 文章末尾会有完整项目下载地址,不要着急!

为什么这么做?
UEditor自定义图片/文件上传路径与回显
看下面两个图片:
UEditor自定义图片/文件上传路径与回显
UEditor自定义图片/文件上传路径与回显
如果不明白,建议官方文档先看一下。时间所限,回头再补充细节。

【3】修改配置文件

① 修改config.json配置文件

下图注释是真的很清楚了!记住这里配置的图片访问路径前缀“/uefile/”
UEditor自定义图片/文件上传路径与回显
UEditor自定义图片/文件上传路径与回显

② Tomcat做虚拟路径映射

如下所示,当页面访问/uefile前缀的请求时,就会自动去E:\img寻找。
UEditor自定义图片/文件上传路径与回显

关于Tomcat虚拟路径映射可以参考博文:Tomcat配置虚拟路径,使上传文件与服务器分离


【4】Struts2下UEditor出现上传数据找不到的错误

Struts2这个已经被淘汰的玩意在某些程序中还仍然可见。如果核心过滤器url-pattern设置为/*,那么你很可能就会遇到上传图片的时候出现上传数据找不到的错误。

解决办法

① 自定义过滤器继承核心过滤器,放过UEditor的请求;

② 修改Struts2的url-pattern,比如为.action

项目下载地址:https://github.com/JanusJ/Demo/tree/master/UeditorWeb