nodejs 整合kindEditor实现图片上传
kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/upload.html可以参照实现nodejs的整合,发现实用nodejs更简单
环境:
unbuntu14.10
nodejs0.10.35
express4.11.2
formidable1.0.16
kindEditor4.1.10
webStorm8
1.通过IDE或终端创建一个名称为test的工程
2.编辑package.json添加formidable依赖,这里使用的是1.0.16版本,之后通过终端执行npminstall完成依赖的安装
3.将kindEditor整个目录放到test/public/lib下
4.修改index.ejs和index.js文件
index.ejs中整合kindEditor:
设置kindEditor的uploadJson为nodejs所提供的处理图片上传的路由url这里用的是/uploadImg
index.js中添加处理图片上传的路由url:
添加/uploadImg对应的post处理方式,
代码如下:
index.js
<!DOCTYPEhtml>
<html>
<head>
<title><%=title%></title>
<linkrel='stylesheet'href='/stylesheets/style.css'/>
<scriptcharset="utf-8"src="/lib/kindeditor-4.1.10/kindeditor.js"></script>
<scriptcharset="utf-8"src="/lib/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script>
varoptions={
uploadJson:'/uploadImg'
};
KindEditor.ready(function(K){
window.editor=K.create('#editor',options);
});
</script>
</head>
<body>
<h1><%=title%></h1>
<textareaid="editor"name="content"style="width:700px;height:300px;">
<strong>HTML内容</strong>
</textarea>
</body>
</html>
index.js
varexpress=require('express');
varrouter=express.Router();
varformidable=require('formidable');
/*GEThomepage.*/
router.get('/',function(req,res,next){
res.render('index',{title:'图片上传'});
});
router.post('/uploadImg',function(req,res,next){
varform=newformidable.IncomingForm();
form.keepExtensions=true;
form.uploadDir=__dirname+'/../public/upload';
form.parse(req,function(err,fields,files){
if(err){
throwerr;
}
varimage=files.imgFile;
varpath=image.path;
path=path.replace('/\\/g','/');
varurl='/upload'+path.substr(path.lastIndexOf('/'),path.length);
varinfo={
"error":0,
"url":url
};
res.send(info);
});
});
module.exports=router;
之后通过IDE或终端启动test工程,通过http://localhost:3000访问页面就可以上传图片了