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教程 安装express及配置app.js文件的详细步骤
May 11 NodeJs
NodeJS Express框架中处理404页面一个方式
May 28 NodeJs
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
Sep 26 NodeJs
nodejs创建web服务器之hello world程序
Aug 20 NodeJs
Nodejs实战心得之eventproxy模块控制并发
Oct 27 NodeJs
NodeJS中的MongoDB快速入门详细教程
Nov 11 NodeJs
nodejs处理图片的中间件node-images详解
May 08 NodeJs
NodeJs form-data格式传输文件的方法
Dec 13 NodeJs
Nodejs中的JWT和Session的使用
Aug 21 NodeJs
nodejs通过钉钉群机器人推送消息的实现代码
May 05 NodeJs
监控Nodejs的性能实例代码
Jul 02 NodeJs
nodejs 递归拷贝、读取目录下所有文件和目录
Jul 18 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 smarty模版引擎中的缓存应用
2009/12/02 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php实现监听事件
2013/11/06 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
PHP中的use关键字概述
2014/07/23 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
python 实现插入排序算法
2012/06/05 Python
在Django中使用Sitemap的方法讲解
2015/07/22 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Python 复平面绘图实例
2019/11/21 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
Python双链表原理与实现方法详解
2020/02/22 Python
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
继电保护工岗位职责
2014/01/05 职场文书
环保建议书300字
2014/05/14 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
微信早安问候语
2015/11/10 职场文书
小组口号霸气押韵
2015/12/24 职场文书
如何撰写促销方案?
2019/07/05 职场文书