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

言曌 2018年03月01日00:53:38 6 7644 views

博主分享免费Java教学视频，B站账号：Java刘哥，长期提供技术问题解决、项目定制：本站商品点此

一、先看效果图

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

然后查看上传目录

具体代码实现如下

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

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

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

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> wangEditor 测试</title>
</head>
<body>
<div id="editor">
<p>开始记录你的成长！</p>
</div>
<script type='text/javascript' th:src="@{/static/components/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/components/wangEdit/wangEditor.min.js}"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
//设置上传的参数名
editor.customConfig.uploadFileName = 'file';
// 上传图片到服务器
editor.customConfig.uploadImgServer = '/upload'
// 将图片大小限制为 10M
editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024;
editor.create()
</script>
</body>
</html>

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

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

Controller

/**
* 富文本编辑器中的上传图片
* @param file
* @return
* @throws IOException
*/
@PostMapping(value = "/upload")
public ResponseEntity<EditorUploadVO> upload(@RequestParam("file") MultipartFile file) throws IOException {
//本地使用,上传位置
//文件的完整名称,如spring.jpeg
String filename = file.getOriginalFilename();
//文件名,如spring
String name = filename.substring(0, filename.indexOf("."));
//文件后缀,如.jpeg
String suffix = filename.substring(filename.lastIndexOf("."));
//创建年月文件夹
Calendar date = Calendar.getInstance();
File dateDirs = new File(date.get(Calendar.YEAR)
+ File.separator + (date.get(Calendar.MONTH) + 1));
//目标文件
File descFile = new File(savePath + "uploads"+ File.separator + dateDirs + File.separator + filename);
int i = 1;
//若文件存在重命名
String newFilename = filename;
while (descFile.exists()) {
newFilename = name + "(" + i + ")" + suffix;
String parentPath = descFile.getParent();
descFile = new File(parentPath + File.separator + newFilename);
i++;
}
//判断目标文件所在的目录是否存在
if (!descFile.getParentFile().exists()) {
//如果目标文件所在的目录不存在，则创建父目录
descFile.getParentFile().mkdirs();
}
//将内存中的数据写入磁盘
file.transferTo(descFile);
//完整的url
String fileUrl = "/uploads/" + dateDirs + "/" + newFilename;
String[] data = {fileUrl};
return ResponseEntity.ok().body(new EditorUploadVO(0,data));
}

返回 JSON 结构必须为

最终效果图如上

三月

01日