springboot实现kindeditor图片上传
时间: 2023-06-29 18:04:01 浏览: 62
KindEditor是一款基于JavaScript的富文本编辑器,它可以方便地集成到网站中,并支持图片上传功能。在Spring Boot中实现KindEditor图片上传可以按照以下步骤进行:
1. 在Spring Boot中添加以下依赖:
```xml
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
```
2. 创建一个Controller用于处理图片上传请求,代码如下:
```java
@RestController
@RequestMapping("/upload")
public class FileUploadController {
@PostMapping("/image")
public String uploadImage(HttpServletRequest request) throws Exception {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile file = multipartRequest.getFile("imgFile");
String filename = file.getOriginalFilename();
String suffix = filename.substring(filename.lastIndexOf(".") + 1);
String newFilename = UUID.randomUUID().toString() + "." + suffix;
String savePath = "D:/upload/images/" + newFilename; // 上传文件保存路径,根据实际情况修改
File destFile = new File(savePath);
if (!destFile.getParentFile().exists()) {
destFile.getParentFile().mkdirs();
}
file.transferTo(destFile);
String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/upload/images/" + newFilename; // 图片访问URL,根据实际情况修改
return "{\"error\":0,\"url\":\"" + url + "\"}";
}
}
```
3. 在HTML页面中集成KindEditor,并设置图片上传的请求地址,代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KindEditor图片上传示例</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/kindeditor-all.min.css" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/kindeditor-all.min.js"></script>
</head>
<body>
<textarea id="editor"></textarea>
<script>
KindEditor.ready(function(K) {
K.create('#editor', {
uploadJson: '/upload/image',
allowFileManager: false
});
});
</script>
</body>
</html>
```
4. 启动Spring Boot应用,访问HTML页面即可进行图片上传。上传的图片会保存在指定的路径中,并返回图片的访问URL给KindEditor进行显示。