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;">
<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 图片预览和上传的示例代码,分享给大家,具体如下: 效果如下: 前言 一般在上传图片之前需要暂存在本地预览一下. 前端图片预览用的是 FileReader的readAsDataURL方法 nodejs 图片上传用的是中间件 Multer 本地图片预览 FileReader对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用文件或Blob对象来指定要读取的文件或数据. readAsDataURL方法用于读取指定的Blob或文件的内容.当读取操
-
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
这次我们说一下nodejs+angularjs多图片上传的问题 此前也在网站看了很多篇文章,有关的内容说多不多,说少也不少,但我一一试过以后有成功的,也有没有成功的,折磨了我很长时间,最终也是成功实现了,于是想写下这篇文章,分享我的代码,也希望后人不要踏进我的坑. 首先说一下nodejs所以依赖的插件 multiparty 和 fs,可以用npm工具来安装 npm install multiparty --save npm install fs --save 先贴出我nodejs的后台代码(注意
-
nodejs利用ajax实现网页无刷新上传图片实例代码
通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormData()对象可以有效的解决这个问题 废话不多说 直接上关键代码: html部分 <div class="form-group"> <label>File input</label> <input type="file" name="file" id="file">
-
轻松创建nodejs服务器（10）：处理上传图片
本节我们将实现,用户上传图片,并将该图片在浏览器中显示出来. 这里我们要用到的外部模块是Felix Geisendörfer开发的node-formidable模块.它对解析上传的文件数据做了很好的抽象. 要安装这个外部模块,需在cmd下执行命令: 复制代码 代码如下: npm install formidable 如果输出类似的信息就代表安装成功了: 复制代码 代码如下: npm info build Success: formidable@1.0.14 安装成功后我们用request将其引入
-
angular2+nodejs实现图片上传功能
在使用angular2进行图片上传的时候,遇到了各种各样的问题.在多番尝试之后最终成功上传图片,下面将我的方法分享给大家: nodejs 后台代码 var express = require("express"); //网络请求模块 var request = require("request"); //引入nodejs文件系统模块 const fs = require('fs'); //引入body-parser //包含在请求正文中提交的键/值对数据. //默认
-
图片上传之FileAPI与NodeJs
HTML5之fileAPI HTML5之fileAPI使得我们处理图片上传更加简单. 实例 html代码 <div class="form-group"> <label for="modal_inputFile" class="col-md-3 control-label label-font">位置图:</label> <div class="col-md-9"> <in
-
详解nodejs实现本地上传图片并预览功能（express4.0+）
Express为:4.13.1 multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\"+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览.前端采用通过ajax方式上传文件,使用FormData进行ajax请求 ,nodejs端采用multiparty模块 相关查看文档: 通过Ajax
-
ajax +NodeJS 实现图片上传实例
前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传.这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接"拿来"用 note(注意) 大家先在public目录下创建一个名为uploads的文件夹,这个文件夹是用来保存你上传过的图片 安装multer模块: npm i -S multer code(代码) 1.app.js const express = require('express'); const multer = requi
-
NodeJS实现图片上传代码(Express)
文件上传是每个网站不可避免的,最近需要做些上传图片的功能,主要解决两个问题,一个是文件上传样式和服务端路径保存,功能很简单,做起来倒是没那么简单,先从最简单的页面的上传页面的样式开始. 页面样式 Html页面默认的上传的是比较难看的,需要重做一个背景图片,通过背景图片添加上传的图片: 上传图片样式: <div class="upload-container"> <input type="file" name="fileToUpload&q
-
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添加form
-
asp.net core集成kindeditor实现图片上传功能
本文为大家分享了asp.net core 如何集成kindeditor并实现图片上传功能的具体方法,供大家参考,具体内容如下 准备工作 1.visual studio 2015 update3开发环境 2.net core 1.0.1 及以上版本 目录 新建asp.net core web项目 下载kindeditor 增加图片上传控制器 配置kindeditor参数 代码下载 新建asp.net core web项目 新建一个asp.net core项目,这里命名为kindeditor 选中w
-
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
我们接下来就来聊聊Yii2框架是如何整合百度编辑器umeditor的. umeditor是啥,我只听过ueditor,你这umeditor是不是盗版的东东喃?umeditor呢,说白了就是mini版的ueditor,按照百度官方说法,其实就是编辑器中的"短软小",但是功能俱全.咳咳,咱们回归正题. 首先勒,咱们先去官网下载一份mini版的ueditor umeditor,注意哦,是um editor. 下载下来解压放到项目根目录下面的 /css目录下 命名为umeditor,具体位置各
-
Kindeditor编辑器添加图片上传水印功能（php代码）
KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框.可以无缝地与 Java..NET.PHP.ASP 等程序集成,比较适合在 CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使用. 主要特点: 快速:体积小,加载速度快 开源:开放源代码,高水平,高品质 底层:内置自定义 DOM 类库,精确操作 DOM 扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能 风格:修改编辑器
-
Thinkphp整合阿里云OSS图片上传实例代码
Thinkphp3.2整合阿里云OSS图片上传实例,图片上传至OSS可减少服务器压力,节省宽带,安全又稳定,阿里云OSS对于做负载均衡非常方便,不用传到各个服务器了 首先引入阿里云OSS类库 <?php namespace Home\Controller; use Think\Controller; use OSS\Core\OssException; vendor('aliyun.autoload'); 上传图片自己写,上传成功到阿里云后,删除临时文件 function aliyun() {
-
Nodejs实现图片上传、压缩预览、定时删除功能
前言 我们程序员日常都会用到图片压缩,面对这么常用的功能,肯定要尝试实现一番. 第一步,node基本配置 这里我们用到的是koa框架,它可是继express框架之后又一个更富有表现力.更健壮的web框架. 1.引入基本配置 const Koa = require('koa');// koa框架 const Router = require('koa-router');// 接口必备 const cors = require('koa2-cors'); // 跨域必备 const tinify =