Node.js集成KindEditor图片上传功能实现教程

作者：服务小站

时间：2026-10-22

本文介绍如何在Node.js环境中配置KindEditor编辑器以实现图片上传功能。主要步骤包括在客户端JS中指定uploadJson地址，在Node.js服务端通过express.bodyParser配置上传目录，并利用路由将请求指向处理函数。最终实现单图及批量上传功能，代码示例基于Express框架。

文章目录

Node.js集成KindEditor图片上传功能实现教程

前言

近期因项目需求需引入在线编辑器，经对比多款工具后认为KindEditor表现良好。尽管该编辑器为国产软件且官方文档尚不完善，但可参考其提供的官方插件进行二次开发。KindEditor官网提供了ASP、ASP.NET及JSP等语言的整合应用示例，可作为参考依据。

关于Node.js环境下KindEditor上传功能的实现，可参照官方文档说明：http://kindeditor.net/docs/upload.html

KindEditor编辑器的在线下载地址为：https://www.jb51.net/codes/36131.html

具体实现步骤如下：

首先，在客户端JavaScript代码中，需将uploadJson参数设置为执行Form POST请求的目标地址。


var options = {
 uploadJson: '/uploadImg'
};
KindEditor.ready(function(k){
 editor = k.create('#post',options);
});

其次，在Node.js服务端配置文件中，需明确指定文件上传的处理地址及存储目录。


var express = require('express');
var bodyParser = require('body-parser');
app.use(express.bodyParser({uploadDir:'./public/upload'}));

接着，通过路由配置将接收到的请求转发至uploadImg方法进行处理。


module.exports = function (app, routes) {
 app.post('/uploadImg',routes.uploadImg);
};
exports.uploadImg = function(req, res) {
 var fname = req.files.imgFile.path.replace("public\\upload\\", "").replace("public/upload/", "");
 var info = {
  "error": 0,
  "url": "/upload/"+fname
 };
 res.send(info);
}

完成上述配置后，即可在KindEditor中正常使用图片上传及批量上传功能。

Node.js集成KindEditor图片上传功能实现教程