nodejs+express整合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.ejs

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

nodejs+express整合kindEditor实现图片上传 - 木子丰咪咕晶 - 开源中国相关推荐

nodejs+express整合kindEditor实现图片上传
为什么80%的码农都做不了架构师?>>> kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/ ...
html免费编辑器图片alt,织梦模板kindeditor编辑器图片上传增加图片说明alt属性和title属性...
织梦kindeditor编辑器图片上传增加图片说明alt属性和title属性效果图: 1.在织梦/include/kindeditor/kindeditor-all.js 或者 /kindeditor ...
nodeJs中间件Multer详解_使用express实现本地文件/图片上传到服务器指定目录
最终实现的效果,更改Input的值后,将图片显示出来.输入描述信息,提交后,图片上传到后台对应的路径下. Multer Multer 是一个node.js中间件,用于处理 multipart/form ...
kindeditor java 上传图片_java中KindEditor本地图片上传与上传失败问题
此代码是最新版的 KindEditor 3.5.x 实现本地图片上传的方法,用于oschina即将改版的个人空间 KindEditor 要求的JSON格式如下: {"error": ...
从零基础认识KindEditor实现图片上传
KindEditor图片上传一般用户访问系统,使用上传图片功能,那么图片就上传到你的当前项目所在的tomcat服务器上,在/image下,上传成功后用户可以直接访问http://ip:port/pr ...
ThinkPHP5整合LayUI编辑器图片上传
2019独角兽企业重金招聘Python工程师标准>>> 一.创建上传方法 public function uploadimg(){$image = $_FILES['file'];$ ...
SpringBoot整合springDataJpa实现图片上传和显示
目录使用工具使用说明使用maven的pom.xml文件环境搭建代码示例 SQL代码 java目录 Img.java MyWebMvcConfigurerAdapter.java FileCo ...
php 多图上传编辑器,ThinkPHP5整合LayUI编辑器图片上传
一.创建上传方法 public function uploadimg() { $image = $_FILES['file']; $filebase = file_get_contents($imag ...
elementUI+nodejs中间件multer+mysql实现图片上传功能
vue页面上传组件 <template><div class="upload"><el-uploadaction="":clas ...

nodejs+express整合kindEditor实现图片上传 - 木子丰咪咕晶 - 开源中国

nodejs+express整合kindEditor实现图片上传 - 木子丰咪咕晶 - 开源中国相关推荐

最新文章

热门文章