CKEditor 5图片上传接口需返回哪些信息？附前后端代码示例

嘿，针对你用CKEditor 5搭配CKFinder上传配置的场景，后端接口的返回格式得符合CKFinder的规范，具体要求如下：

上传成功时的响应 #

必须包含两个核心字段：

• uploaded: 布尔类型，固定为true，用来告诉编辑器上传操作已成功
• url: 字符串类型，上传后图片的完整可访问绝对URL，编辑器会用这个地址把图片插入到内容里

举个标准的成功响应示例：

{
  "uploaded": true,
  "url": "https://your-platform.com/static/upload/20240520/example-image.jpg"
}

上传失败时的响应 #

如果上传出错（比如文件大小超限、格式不支持等），需要返回：

• uploaded: 布尔类型，固定为false
• error: 对象类型，里面必须有message字段，用来返回具体的错误提示，方便前端展示给用户

失败响应示例：

{
  "uploaded": false,
  "error": {
    "message": "上传失败：仅支持JPG/PNG格式的图片，且文件大小不能超过2MB"
  }
}

针对你Spring控制器的额外提醒 #

1. 接口要支持multipart/form-data请求类型，因为CKEditor上传图片是通过表单提交文件的，Spring里可以用@RequestParam("upload") MultipartFile file来接收文件（注意参数名默认是upload，如果有修改要对应调整）
2. 返回的url一定要是前端能直接访问的地址，别用相对路径，避免编辑器无法加载图片
3. 确保接口返回的是标准JSON格式，@ResponseBody注解已经帮你处理了Content-Type为application/json，注意不要在接口里输出额外的日志或HTML内容，否则会破坏JSON结构

内容的提问来源于stack exchange，提问作者wangning