下面是详细的Node.js整合KindEditor实现图片上传的攻略：
一、下载KindEditor
首先到KindEditor官网下载最新版的KindEditor，解压文件到项目的public文件夹下，并将文件夹名称改为kindeditor。
二、在HTML页面中引入KindEditor
在需要使用KindEditor的HTML页面中引入相关的CSS和JS文件，并创建一个textarea元素作为编辑器的容器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KindEditor Demo</title>
<link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="/kindeditor/plugins/code/prettify.js"></script>
</head>
<body>
<textarea id="content" name="content"></textarea>
<script type="text/javascript">
var editor = KindEditor.create('textarea[name="content"]', {
allowFileManager : true,
uploadJson : '/upload'
});
</script>
</body>
</html>
三、编写Node.js服务器处理上传的图片
使用Node.js的express框架编写服务器端处理图片上传的代码，首先要安装相关的依赖库：express、body-parser和multer。
npm install express body-parser multer --save
在路由中编写处理图片上传的代码。
const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
const storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, 'public/uploads') //指定上传文件的存储路径
},
filename: function(req, file, cb) {
cb(null, file.originalname) //指定上传文件的文件名
}
});
const upload = multer({ storage: storage });
app.post('/upload', upload.single('imgFile'), function(req, res) {
const file = req.file;
const url = '/uploads/' + file.originalname;
res.json({ error: 0, message: '上传成功', url: url });
});
四、配置静态文件访问路由
在Node.js的路由中配置静态文件的路径，使得上传的图片可以被访问。
app.use(express.static('public'));
完成以上几步之后，就可以在页面中使用KindEditor上传图片并在服务器端保存了。
示例一
在编辑器中插入一张图片，然后提交表单，在Node.js的服务器端可以接收到图片文件并保存在public/uploads文件夹中。在HTML页面中可以通过<img>标签来展示这张图片。
示例二
在HTML页面中使用KindEditor上传一张图片，然后将图片的url地址保存在服务器端。在HTML页面中使用JavaScript加载获取到的url地址即可展示图片。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：nodejs 整合kindEditor实现图片上传 - Python技术站
微信扫一扫 
支付宝扫一扫 