|
阅读:11754回复:3
node.js 中实现 kindEditor富文本图片上传功能的方法教程
最近由于工作需要使用在线编辑器,找了几个对比了下KindEditor还是不错的,国产的但文档还是不全,还好能参考官方插件,kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用
可以参照官方文档实现nodejs的kindEditor上传功能:http://kindeditor.net/docs/upload.html 在线下载kindEditor编辑器:http://www./codes/36131.html 实现方法: 1.在客户端js中定义uploadJson为form post的action地址 var options = { uploadJson: '/uploadImg' }; KindEditor.ready(function(k){ editor = k.create('#post',options); }); 2.在nodejs中配置文件上传地址 var express = require('express'); var bodyParser = require('body-parser'); app.use(express.bodyParser({uploadDir:'./public/upload'})); 3.通过路由将请求交给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中使用图片上传和图片批量上传的功能了 图片:kindeditor2.jpg
原文:http://www.52jbj.com/jbdq/571675.html |
|
|
|
沙发#
发布于:2017-11-20 10:02
|
|
|
板凳#
发布于:2017-11-19 23:49
express4使用multer配置图片传输路径,再在route进行拦截
var options = { uploadJson:"/kindEditorUpload" } KindEditor.ready(function(K) { window.editor = K.create('#editor_id',options); }); //multer整体配置部分 //引入文件处理模块 const multer = require("multer"); //上传配置 const storage = multer.diskStorage({ destination:(req,file,callback)=>{ callback(null,"./public/uploadimg"); }, filename:(req,file,callback)=>{ callback(null,file.originalname); //此处为我设置的存储文件名,可以根据情况自行修改 } }); const upload = multer({ storage:storage }); module.exports = upload; //路由拦截部分 //先自行导入配置好的multer模块 //拦截图片上传 router.post("/kindEditorUpload",upload.array("imgFile",20),(req,resp)=>{ let fname = req.files[0].filename; //此处为我设置的存储文件名,可以根据情况自行修改 let info = { "error":0, "url":"/uploadimg/"+fname //此处为我设置的存储文件名,可以根据情况自行修改 }; resp.send(info); }); |
|
|
地板#
发布于:2017-11-10 16:05
KindEditor 文本编辑器的上传功能,使用的express3 版本。 express4 需要修改下配置
|
|
|
