广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >nodejs 整合kindEditor实现图片上传
  • 282
分享到

nodejs 整合kindEditor实现图片上传

图片上传nodejskindEditor 2022-06-04 17:06:43 282人浏览 安东尼
摘要

kindEditor官网上中提供了ASP,asp.net,jsP相关的整合应用,Http://kindeditor.net/docs/upload.html可以参照实现nodejs的整合,发现实用nodej

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');



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访问页面就可以上传图片了

--结束END--

本文标题: nodejs 整合kindEditor实现图片上传

本文链接: https://www.lsjlt.com/news/12173.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作