nodejs 整合kindEditor实现图片上传


Posted in NodeJs onFebruary 03, 2015

kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/upload.html可以参照实现nodejs的整合,发现实用nodejs更简单

环境:
unbuntu 14.10
nodejs 0.10.35
express 4.11.2
formidable 1.0.16
kindEditor 4.1.10
webStorm 8

1.通过IDE或终端创建一个名称为test的工程

2.编辑package.json添加formidable依赖,这里使用的是1.0.16版本,之后通过终端执行npm install完成依赖的安装

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

<!DOCTYPE html>

<html>

  <head>

    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css' />

      <script charset="utf-8" src="/lib/kindeditor-4.1.10/kindeditor.js"></script>

      <script charset="utf-8" src="/lib/kindeditor-4.1.10/lang/zh_CN.js"></script>

      <script>

          var options = {

              uploadJson: '/uploadImg'

          };

          KindEditor.ready(function(K) {

              window.editor = K.create('#editor', options);

          });

      </script>

  </head>

  <body>

    <h1><%= title %></h1>

    <textarea id="editor" name="content" style="width:700px;height:300px;">

        <strong>HTML内容</strong>

    </textarea>

  </body>

</html>

index.js

var express = require('express');

var router = express.Router();

var formidable = require('formidable');

/* GET home page. */

router.get('/', function(req, res, next) {

  res.render('index', { title: '图片上传' });

});

router.post('/uploadImg', function(req, res, next) {

    var form = new formidable.IncomingForm();

    form.keepExtensions = true;

    form.uploadDir = __dirname + '/../public/upload';

    form.parse(req, function (err, fields, files) {

        if (err) {

            throw err;

        }

        var image = files.imgFile;

        var path = image.path;

        path = path.replace('/\\/g', '/');

        var url = '/upload' + path.substr(path.lastIndexOf('/'), path.length);

        var info = {

            "error": 0,

            "url": url

        };

        res.send(info);

    });

});

module.exports = router;

之后通过IDE或终端启动test工程,通过http://localhost:3000访问页面就可以上传图片了

NodeJs 相关文章推荐
NodeJs中的非阻塞方法介绍
Jun 05 NodeJs
轻松创建nodejs服务器(4):路由
Dec 18 NodeJs
NodeJS Web应用监听sock文件实例
Feb 18 NodeJs
Nodejs中session的简单使用及通过session实现身份验证的方法
Feb 04 NodeJs
Mac 安装 nodejs方法(图文详细步骤)
Oct 30 NodeJs
NodeJS简单实现WebSocket功能示例
Feb 10 NodeJs
nodejs 简单实现动态html的方法
May 12 NodeJs
webpack打包nodejs项目的方法
Sep 26 NodeJs
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
Oct 17 NodeJs
nodejs使用async模块同步执行的方法
Mar 02 NodeJs
监控Nodejs的性能实例代码
Jul 02 NodeJs
NodeJs实现简易WEB上传下载服务器
Aug 10 NodeJs
NodeJS学习笔记之Connect中间件应用实例
Jan 27 #NodeJs
NodeJS学习笔记之Connect中间件模块(二)
Jan 27 #NodeJs
NodeJS学习笔记之Connect中间件模块(一)
Jan 27 #NodeJs
nodejs批量修改文件编码格式
Jan 22 #NodeJs
NodeJS学习笔记之MongoDB模块
Jan 13 #NodeJs
NodeJS学习笔记之(Url,QueryString,Path)模块
Jan 13 #NodeJs
NodeJS学习笔记之FS文件模块
Jan 13 #NodeJs
You might like
PHP修改session_id示例代码
2014/01/08 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
JS常用函数使用指南
2014/11/23 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
Python第三方库的安装方法总结
2016/06/06 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
协议书的格式
2014/04/23 职场文书
村庄绿化方案
2014/05/07 职场文书
倡议书格式模板
2014/05/13 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
刑事上诉状范文
2015/05/22 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
golang json数组拼接的实例
2021/04/28 Golang
golang elasticsearch Client的使用详解
2021/05/05 Golang
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
一文弄懂MySQL索引创建原则
2022/02/28 MySQL