整体思路
- 前端 (KindEditor)：用户点击 KindEditor 的图片上传按钮，KindEditor 会将表单数据（包括文件）通过
POST请求发送到我们指定的后端接口。 - 后端 (Java)：创建一个 Spring Boot 控制器（Controller）来接收这个
POST请求，后端主要做三件事：- 接收上传的文件。
- 将文件保存到服务器的指定目录（
./uploads）。 - 生成一个可以访问该文件的 URL。
- 将这个 URL 以 KindEditor 期望的 JSON 格式返回给前端。
第一步：后端实现 (Java + Spring Boot)
我们将使用 Spring Boot 来快速搭建一个后端服务。
（图片来源网络，侵删）
项目依赖 (pom.xml)
确保你的 pom.xml 文件中包含了以下依赖，特别是用于处理文件上传的 spring-boot-starter-web。
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.5</version> <!-- 你可以使用更新的稳定版本 -->
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>kindeditor-upload</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>kindeditor-upload</name>
<description>KindEditor Image Upload Demo</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<!-- 核心Web依赖，已包含文件上传功能 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Lombok (可选，简化代码) -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!-- Test -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
配置文件 (application.properties)
我们需要配置上传文件的大小限制和保存路径。
# 服务器端口 server.port=8080 # 文件上传相关配置 # 单个文件大小限制 (10MB) spring.servlet.multipart.max-file-size=10MB # 总请求大小限制 (包含多个文件时) (10MB) spring.servlet.multipart.max-request-size=10MB # 指定文件上传后的存储路径 # 在项目根目录下创建一个名为 uploads 的文件夹 file.upload.path=./uploads
创建文件上传目录
在你的项目根目录下创建一个名为 uploads 的文件夹，用于存放上传的图片。
your-project/
├── src/
├── target/
├── uploads/ <-- 创建这个文件夹
└── pom.xml创建控制器 (UploadController.java)
这是最核心的部分,负责处理文件上传请求并返回结果。
（图片来源网络，侵删）
package com.example.kindeditorupload.controller;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
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;
@RestController
public class UploadController {
// 从配置文件中读取文件上传路径
@Value("${file.upload.path}")
private String uploadPath;
/**
* KindEditor 图片上传接口
* @param file 上传的文件
* @param dir KindEditor 传来的目录参数，如 'image', 'file' 等
* @return KindEditor 期望的 JSON 格式
*/
@PostMapping("/upload")
public Map<String, Object> uploadImage(@RequestParam("imgFile") MultipartFile file,
@RequestParam(value = "dir", required = false) String dir) {
Map<String, Object> result = new HashMap<>();
// 1. 检查文件是否为空
if (file.isEmpty()) {
result.put("error", 1);
result.put("message", "请选择要上传的文件");
return result;
}
// 2. 检查文件类型 (可选，这里只允许图片)
String originalFilename = file.getOriginalFilename();
String contentType = file.getContentType();
if (contentType == null || (!contentType.startsWith("image/"))) {
result.put("error", 1);
result.put("message", "只允许上传图片文件");
return result;
}
try {
// 3. 创建上传目录 (如果不存在)
File uploadDir = new File(uploadPath);
if (!uploadDir.exists()) {
uploadDir.mkdirs();
}
// 4. 生成新的文件名，防止文件名冲突
// 获取文件后缀
String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
// 生成唯一文件名
String newFilename = UUID.randomUUID().toString().replace("-", "") + suffix;
// 5. 构建文件在服务器上的完整路径
File destFile = new File(uploadPath, newFilename);
// 6. 保存文件到服务器
file.transferTo(destFile);
// 7. 构造返回给 KindEditor 的数据
// KindEditor 成功时返回的 JSON 格式为: {"error": 0, "url": "图片访问URL"}
result.put("error", 0);
// 构建可访问的URL，这里假设项目部署在根路径下
// 如果你的应用上下文是 /myapp，则 URL 应为 /myapp/uploads/xxx.jpg
String fileUrl = "/uploads/" + newFilename;
result.put("url", fileUrl);
} catch (IOException e) {
e.printStackTrace();
result.put("error", 1);
result.put("message", "文件上传失败: " + e.getMessage());
}
return result;
}
}
启动类 (KindeditorUploadApplication.java)
确保你的 Spring Boot 启动类存在。
package com.example.kindeditorupload;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class KindeditorUploadApplication {
public static void main(String[] args) {
SpringApplication.run(KindeditorUploadApplication.class, args);
}
}
至此，后端部分已经完成。 你可以启动应用，测试一下 /upload 接口是否能正常接收文件并返回 {"error": 0, "url": "..."}，你可以使用 Postman 或其他 API 工具来测试，发送一个 POST 请求到 http://localhost:8080/upload，在 form-data 中添加一个 key 为 imgFile 的文件。
第二步：前端实现 (KindEditor 集成)
下载 KindEditor
从 KindEditor 的官网下载最新版本：http://kindeditor.net/down.php
下载后,解压并将 kindeditor-x.x.x 文件夹放入你的前端项目（src/main/resources/static 目录下）。
（图片来源网络，侵删）
创建 HTML 页面
在 src/main/resources/templates 目录下创建一个 index.html 文件。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">KindEditor 图片上传示例</title>
<!-- 引入 KindEditor 的 CSS -->
<link rel="stylesheet" href="/kindeditor-4.1.12/themes/default/default.css"/>
<style>
body { font-family: Arial, sans-serif; margin: 20px; } 
