- 前端 (KindEditor)：配置 KindEditor，指定上传接口、文件域名称等。
- 后端 (Java)：创建一个 Controller 来接收前端的文件请求，处理文件（如重命名、检查类型、保存到服务器），然后返回 KindEditor 所需的 JSON 格式响应。
下面我将提供一个完整、详细的步骤和代码示例。
（图片来源网络，侵删）
第一步：前端配置 (HTML & JavaScript)
在你的 HTML 页面中，你需要引入 KindEditor 的核心文件，并进行初始化配置，其中最重要的就是设置 uploadJson 参数，指向你的后端上传接口。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">KindEditor Java 上传示例</title>
<!-- 引入 KindEditor 核心文件 -->
<script charset="utf-8" src="kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
</head>
<body>
<h2>KindEditor 图片上传示例</h2>
<!-- 1. 创建一个 textarea 用于 KindEditor 初始化 -->
<textarea id="editor_id" name="content" style="width:800px;height:400px;">
<strong>KindEditor</strong> 是一款开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得的编辑体验。
</textarea>
<script>
KindEditor.ready(function(K) {
// 2. 初始化 KindEditor
K.create('#editor_id', {
// 指定上传图片的接口URL
uploadJson : '/api/upload/image',
// 指定浏览服务器已上传文件的接口URL (可选，但推荐)
fileManagerJson : '/api/fileManager',
// 允许上传的文件类型
allowImageUpload : true,
allowFlashUpload : false,
allowMediaUpload : false,
allowFileUpload : false,
// 其他配置...
width: '100%',
height: '500px',
resizeType: 1
});
});
</script>
</body>
</html>
关键配置说明：
uploadJson: '/api/upload/image'：这是最核心的配置，它告诉 KindEditor，当用户点击“上传图片”按钮时，应该将文件 POST 请求到这个 URL。fileManagerJson：这是一个可选但非常实用的功能，它允许用户在编辑器内直接浏览和管理服务器上已上传的图片，点击即可插入。
第二步：后端实现 (Java - Spring Boot 示例)
我们将使用 Spring Boot 来处理后端逻辑，因为它能极大地简化 Web 应用的开发，你需要以下依赖：
pom.xml 依赖
<dependencies>
<!-- Spring Web 核心依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Lombok (简化 Java 代码) -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!-- Commons FileUpload (用于处理文件上传，Spring Boot 已自动包含) -->
<!-- 如果你使用 Spring MVC，可能需要显式添加 -->
<!--
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
-->
</dependencies>
创建上传目录
在你的项目根目录或 src/main/resources 下创建一个用于存放上传文件的目录，static/uploads。
（图片来源网络，侵删）
your-project/
├── src/
│ └── main/
│ ├── resources/
│ │ ├── static/
│ │ │ └── uploads/ <-- 图片将保存在这里
│ │ └── ...
│ └── ...
└── pom.xml编写 Controller
这是处理上传请求的核心代码,Controller 需要接收一个 MultipartFile，进行校验和处理，然后返回 JSON 响应。
package com.example.demo.controller;
import com.example.demo.utils.KindEditorResult;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
@Slf4j
@RestController
@RequestMapping("/api")
public class UploadController {
// 从 application.properties 中读取配置
// 上传文件保存路径
@Value("${file.upload.path}")
private String uploadPath;
// 允许的文件类型
@Value("${file.upload.allowed-types}")
private String[] allowedTypes;
@PostMapping("/upload/image")
public KindEditorResult uploadImage(MultipartFile file) {
// 1. 检查文件是否为空
if (file.isEmpty()) {
return KindEditorResult.error("请选择要上传的文件");
}
// 2. 检查文件类型是否合法
String originalFilename = file.getOriginalFilename();
String contentType = file.getContentType();
boolean isAllowed = false;
for (String allowedType : allowedTypes) {
if (contentType.equals(allowedType)) {
isAllowed = true;
break;
}
}
if (!isAllowed) {
return KindEditorResult.error("不支持的文件类型: " + contentType);
}
try {
// 3. 创建上传目录 (如果不存在)
File uploadDir = new File(uploadPath);
if (!uploadDir.exists() && !uploadDir.isDirectory()) {
uploadDir.mkdirs();
}
// 4. 生成新的文件名，防止重名
// "20251027_143052_aBcDeF123456.jpg"
String newFileName = new SimpleDateFormat("yyyyMMdd_HHmmss_").format(new Date())
+ UUID.randomUUID().toString().replace("-", "") + "."
+ originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
// 5. 构建文件在服务器上的完整路径
File destFile = new File(uploadPath + File.separator + newFileName);
// 6. 保存文件到服务器
file.transferTo(destFile);
// 7. 返回 KindEditor 期望的 JSON 格式
// URL 是访问该图片的路径，根据你的项目配置来定
// 假设你的静态资源映射在 /static/**，那么访问路径就是 /uploads/xxx.jpg
String url = "/uploads/" + newFileName;
Map<String, Object> result = new HashMap<>();
result.put("error", 0);
result.put("url", url);
log.info("文件上传成功: {} -> {}", originalFilename, destFile.getAbsolutePath());
return KindEditorResult.success(result);
} catch (IOException e) {
log.error("文件上传失败: {}", originalFilename, e);
return KindEditorResult.error("文件上传失败，服务器错误");
}
}
}
创建工具类 KindEditorResult
为了方便返回 JSON，我们创建一个统一的响应结果工具类。
package com.example.demo.utils;
import lombok.Data;
import java.util.Map;
@Data
public class KindEditorResult {
private Integer error; // 0表示成功，1表示失败
private String url; // 成功时返回的图片URL
private String message;// 失败时返回的错误信息
private Map<String, Object> map; // 用于存放其他自定义数据
// 成功
public static KindEditorResult success(Map<String, Object> data) {
KindEditorResult result = new KindEditorResult();
result.setError(0);
result.setMap(data);
return result;
}
// 成功 (带URL)
public static KindEditorResult success(String url) {
KindEditorResult result = new KindEditorResult();
result.setError(0);
result.setUrl(url);
return result;
}
// 失败
public static KindEditorResult error(String message) {
KindEditorResult result = new KindEditorResult();
result.setError(1);
result.setMessage(message);
return result;
}
}
配置文件 application.properties
在 src/main/resources/application.properties 中配置上传路径和允许的类型。
# 文件上传配置 # 上传文件保存到项目根目录下的 uploads 文件夹 # 在生产环境中，建议使用绝对路径，如 /var/www/uploads/ file.upload.path=./uploads/ # 允许上传的图片 MIME 类型 file.upload.allowed-types=\ image/jpeg, \ image/png, \ image/gif, \ image/bmp
静态资源映射
为了让上传的图片能通过
（图片来源网络，侵删）
