SpringBoot 使用 wangEditor 富文本编辑器上传图片

一、先看效果图

 

然后查看上传目录,也能看到上传成功的图片

SpringBoot 使用 wangEditor 富文本编辑器上传图片

 

 

然后查看上传目录

SpringBoot 使用 wangEditor 富文本编辑器上传图片

 

 

具体代码实现如下

 

二、下载和引用 wangEditor

wangEditor 官网:http://www.wangeditor.com/

下载:https://github.com/wangfupeng1988/wangEditor

 

复制 release 里的文件到项目录中,然后引用 wangEditor.min.js (当然之前要引入 jQuery),不需要引用 css 文件。

 

三、完整代码

HTML

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3.       xmlns:th="http://www.thymeleaf.org"
  4.       xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport"
  8.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  9.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  10.     <title> wangEditor 测试</title>
  11. </head>
  12. <body>
  13. <div id="editor">
  14.     <p>开始记录你的成长!</p>
  15. </div>
  16. <!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
  17. <script type='text/javascript' th:src="@{/static/components/jquery/jquery.min.js}"></script>
  18. <script type="text/javascript" th:src="@{/components/wangEdit/wangEditor.min.js}"></script>
  19. <script type="text/javascript">
  20.     var E = window.wangEditor
  21.     var editor = new E('#editor')
  22.     //设置上传的参数名
  23.     editor.customConfig.uploadFileName = 'file';
  24.     // 上传图片到服务器
  25.     editor.customConfig.uploadImgServer = '/upload'
  26.     // 将图片大小限制为 10M
  27.     editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024;
  28.     editor.create()
  29. </script>
  30. </body>
  31. </html>

uploadFileName 对应的是上传文件 file 框的 name 值,与下面的 @RequestParam("file") 一致;

uploadImgServer 表示上传图片,后台接受地址,跟下面的控制器映射路径一致。这里默认是 POST 方法。

 

Controller

  1. /**
  2.      * 富文本编辑器中的上传图片
  3.      * @param file
  4.      * @return
  5.      * @throws IOException
  6.      */
  7.     @PostMapping(value = "/upload")
  8.     public ResponseEntity<EditorUploadVO> upload(@RequestParam("file") MultipartFile file) throws IOException {
  9.         //本地使用,上传位置
  10.         //文件的完整名称,如spring.jpeg
  11.         String filename = file.getOriginalFilename();
  12.         //文件名,如spring
  13.         String name = filename.substring(0, filename.indexOf("."));
  14.         //文件后缀,如.jpeg
  15.         String suffix = filename.substring(filename.lastIndexOf("."));
  16.         //创建年月文件夹
  17.         Calendar date = Calendar.getInstance();
  18.         File dateDirs = new File(date.get(Calendar.YEAR)
  19.                 + File.separator + (date.get(Calendar.MONTH) + 1));
  20.         //目标文件
  21.         File descFile = new File(savePath + "uploads"+ File.separator + dateDirs + File.separator + filename);
  22.         int i = 1;
  23.         //若文件存在重命名
  24.         String newFilename = filename;
  25.         while (descFile.exists()) {
  26.             newFilename = name + "(" + i + ")" + suffix;
  27.             String parentPath = descFile.getParent();
  28.             descFile = new File(parentPath + File.separator + newFilename);
  29.             i++;
  30.         }
  31.         //判断目标文件所在的目录是否存在
  32.         if (!descFile.getParentFile().exists()) {
  33.             //如果目标文件所在的目录不存在,则创建父目录
  34.             descFile.getParentFile().mkdirs();
  35.         }
  36.         //将内存中的数据写入磁盘
  37.         file.transferTo(descFile);
  38.         //完整的url
  39.         String fileUrl = "/uploads/" + dateDirs + "/" + newFilename;
  40.         String[] data = {fileUrl};
  41.         return ResponseEntity.ok().body(new EditorUploadVO(0,data));
  42.     }

返回 JSON 结构必须为

  1. {
  2.     // errno 即错误代码,0 表示没有错误。
  3.     //       如果有错误,errno != 0,可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
  4.     "errno": 0,
  5.     // data 是一个数组,返回若干图片的线上地址
  6.     "data": [
  7.         "图片1地址",
  8.         "图片2地址",
  9.         "……"
  10.     ]
  11. }

 

最终效果图如上

 

 

注意

如果使用了 Spring Security 注意忽略 /upload 的 CSRF 防护。

参考:SpringBoot 使用 Spring Security 开启了 CSRF 防跨站攻击防护后 POST 方法无效

 

 

参考文档:https://www.kancloud.cn/wangfupeng/wangeditor3

本文地址:https://liuyanzhao.com/7612.html

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
言曌

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: