脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → nodejs 整合kindEditor实现图片上传

nodejs 整合kindEditor实现图片上传

 更新时间：2015年02月03日 11:10:12   投稿：hebedich  
这篇文章主要介绍了nodejs 整合kindEditor实现图片上传,需要的朋友可以参考下

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;">
        &lt;strong&gt;HTML内容&lt;/strong&gt;
    </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访问页面就可以上传图片了

您可能感兴趣的文章:

相关文章

  • node获取命令行中的参数详解

    node获取命令行中的参数详解

    这篇文章主要为大家介绍了node获取命令行中的参数详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • node中的crypto模块操作方法

    node中的crypto模块操作方法

    加密操作可能很棘手,以至于付费的加密服务公司的存在只是为了确保在代码库中正确实现加密操作,本文给大家介绍node中的crypto模块操作方法,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • nodejs 图解express+supervisor+ejs的用法(推荐)

    nodejs 图解express+supervisor+ejs的用法(推荐)

    下面小编就为大家带来一篇nodejs 图解express+supervisor+ejs的用法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • npm ci命令的基本使用方法

    npm ci命令的基本使用方法

    这篇文章主要给大家介绍了关于npm ci命令的基本使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • Nodejs使用mysql2操作数据库的方法完整讲解

    Nodejs使用mysql2操作数据库的方法完整讲解

    MySQL2是一个基于Node.js的MySQL数据库驱动程序,它是MySQL官方推荐的驱动之一,下面这篇文章主要给大家介绍了关于Nodejs使用mysql2操作数据库的相关资料,需要的朋友可以参考下
    2024-01-01
  • 详解如何在NodeJS应用程序中处理多个API请求

    详解如何在NodeJS应用程序中处理多个API请求

    NodeJS默认是异步的,这意味着它已经能够同时处理多个请求,但它只适用于I/O操作,如HTTP请求、文件系统操作、数据库查询、实时聊天应用等,在处理CPU密集型任务时,可能需要很长时间,这就是为什么NodeJS提供了一些我们将在下面介绍的特定包
    2023-12-12
  • 浅谈KOA2 Restful方式路由初探

    浅谈KOA2 Restful方式路由初探

    这篇文章主要介绍了浅谈KOA2 Restful方式路由初探,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • node事件循环中事件执行的顺序

    node事件循环中事件执行的顺序

    在浏览器环境下我们的js有一套自己的事件循环，同样在node环境下也有一套类似的事件循环。本文就详细的来介绍一下，感兴趣的可以了解一下
    2021-08-08
  • 零基础之Node.js搭建API服务器的详解

    零基础之Node.js搭建API服务器的详解

    今天小编就为大家分享一篇关于零基础之Node.js搭建API服务器的详解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-03-03
  • node.js中的fs.lchmodSync方法使用说明

    node.js中的fs.lchmodSync方法使用说明

    这篇文章主要介绍了node.js中的fs.lchmodSync方法使用说明,本文介绍了fs.lchmodSync的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12

最新评论