小编给大家分享一下springboot下怎么实现ueditor上传功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名与空间、网络空间、营销软件、网站建设、红桥网站维护、网站推广。
前言
本文主要写的是:springboot下ueditor上传功能的实现及遇到的一些问题的处理
整体项目结构展示

Springboot整合ueditor及上传功能实现的具体步骤
1、下载ueditor-1.4.3.3
这个在官网下载就行,不过貌似utf-8版本的没有资源了,源码版的下了几次都中断了,最终我是从第三方下的
2、新建一个测试页面
ueditor的根目录下有一个index.html,用它就行,源码如下
完整demo UEditor演示
3、引入上传所需的jar包
com.gitee.qdbp.thirdparty ueditor 1.4.3.3 commons-codec commons-codec commons-fileupload commons-fileupload 1.3.1 commons-io commons-io 2.5 compile org.json json
4、新建上传文件保存目录文件夹,如下

其中的config.json是从ueditor-1.4.3.3的文件夹里拷过来,因为我发现默认上传文件路径就是config.json所在目录,而且springboot下我试了配置imagePathFormat并没有什么用。
5、新建UeditorController
用于读取ueditor.json配置文件,同时实现上传方法(当然这里我们直接使用了ueditor.jar的上传,因此显得很简单,但如果要我们自己写那就有一堆代码量了)
import com.baidu.ueditor.ActionEnter;
import org.springframework.stereotype.Controller;
import org.springframework.util.ClassUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;
/**
* 百度富文本编辑器
* 描述1:config.json中配置的如图片大小限制(imageMaxSize)文件类型等在页面js中已经验证过了,后台不需要在处理
* 描述2:使用ueditor.jar的话就不需要自己
* 描述3:config.json中imageUrlPrefix配置举例:"imageUrlPrefix": "/fileupload/ueditor"
* 描述3:config.json中imagePathFormat配置举例:"imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}"
* 描述4:imageUrlPrefix + imagePathFormat 为上传文件的访问路径
*
* zkh
* 2019年11月14日 9:09
*/
@Controller
public class UeditorController {
// /ueditor/jsp/config.json文件所在的父目录,上传文件默认根目录为config.json文件所在目录
private String configJsonParentPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/fileupload/ueditor";
/**
* UEditor初始化时会以get方式请求serverUrl地址,并且需要在action=config时返回UEditor配置文件信息
* 描述:使用ueditor.jar包中的ActionEnter的话,就不需要自己再去实现其上传功能,因为ActionEnter已经帮我们实现了
*/
@RequestMapping("ueditor")
public void getEditorConfig(HttpServletRequest request, HttpServletResponse response, String action) {
response.setContentType("application/json");
try {
String exec = new ActionEnter(request, configJsonParentPath).exec();
if(action!=null && (action.equals("listfile") || action.equals("listimage"))) {
exec = exec.replace(configJsonParentPath.substring(1), "/");
}
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}注意看注释
6、接着,我们需要将ueditor.config.js中的serverUrl配置为我们在第5步的那个controller,如下

7、最后还要在config.json中配置下我们上传的具体细节,下面以图片上传为例
/* 上传图片配置项 */
"imageActionName": "uploadimage", /* 执行上传图片的action名称(举例:http://localhost:8080/ueditor?action=uploadimage) */
"imageFieldName": "upfile", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制,单位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */
"imageInsertAlign": "none", /* 插入的图片浮动方式 */
/* imageUrlPrefix + imagePathFormat 为当前文件的访问路径 */
"imageUrlPrefix": "/fileupload/ueditor", /* 图片访问路径前缀 */
/* imagePathFormat默认以当前config.json所在的目录为根目录 */
"imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* (注意:默认以当前config.json所在的目录为根目录)上传保存路径,可以自定义保存路径和文件名格式 */
/* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
/* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
/* {time} 会替换成时间戳 */
/* {yyyy} 会替换成四位年份 */
/* {yy} 会替换成两位年份 */
/* {mm} 会替换成两位月份 */
/* {dd} 会替换成两位日期 */
/* {hh} 会替换成两位小时 */
/* {ii} 会替换成两位分钟 */
/* {ss} 会替换成两位秒 */
/* 非法字符 \ : * ? " < > | */
/* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */这里我们需要关注重点理解的是 imageUrlPrefix 、imagePathFormat
1) 域名 + imageUrlPrefix + imagePathFormat 为当前文件的访问路径;
2)imageUrlPrefix是图片访问路径前缀,例如:http://localhost:8080/fileupload/ueditor,imageUrlPrefix就是其中的“/fileupload/ueditor”;
3)imagePathFormat是以imageUrlPrefix为根路径的文件存放的具体路径,例如:
http://localhost:8080/fileupload/ueditor/image/20190202/121222.jpg,imagePathFormat就是其中的“/image/20190202/121222.jpg”;
4)剩下其他参数就很明显了。
7、可能会遇到的问题
1、明明配置的文件最大为2048000,但是文件只有1M多点后台报错了?
解决:这是因为默认开启了springboot的上传,在application.properties中 spring.servlet.multipart.enabled=false 就可以了,或者也可以跳下它的默认最大值 spring.servlet.multipart.max-file-size=1MB,具体如下图:

2、明明修改了imagePathFormat,单还是保存在了原始的路径下?
解决:直接将config.json文件放到了我想保存文件的位置即可。
3、在线管理图片无法显示?
解决:在我们上面的UeditorController中其实已经解决了,就是当action=listfile或者action=listimage时将new ActionEnter(request, configJsonParentPath).exec()得到的字符串中的configJsonParentPath路径替换为空字符串即可,如下

最后启动服务,打开http://localhost:8080/ueditor/index.html页面测试,效果如下图:


看完了这篇文章,相信你对“springboot下怎么实现ueditor上传功能”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
当前名称:springboot下怎么实现ueditor上传功能
文章链接:http://www.jxjierui.cn/article/ihgjih.html


咨询
建站咨询
