NodeJs实现图片上传
关于formidable
NodeJs实现图片上传，此处主要用了插件：formidable
github上关于formidable的资料如下：
https://github.com/felixge/node-formidable
https://www.npmjs.org/package/formidable
创建项目安装formidable
1,创建项目sampleUpload
cd 工作目录
express -e sampleUpload
2,修改package.json文件，添加formidable依赖项
{
"name": "sampleUpload",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"ejs": "~2.3.3",
"express": "~4.13.1",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0",
"formidable":"latest"
}
}
3,安装依赖项
cd sampleUpload && npm install
安装成功，开始完成这个功能，文件目录如下图：
样式主要使用了bootstrap 3.0.3 https://github.com/twbs/bootstrap/releases/tag/v3.0.3
JQuery: 官方下载
不在bootstrap包中的两个css文件代码如下：
body {
min-height: 2000px;
}
.navbar-static-top {
margin-bottom: 19px;
}
navbar-static-top.css
navbar-static-top.css
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
z-index:;
}
.form-signin input[type="text"] {
margin-bottom: 10px;
border-bottom-left-radius:;
border-bottom-right-radius:;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius:;
border-top-right-radius:;
}
signin.css
signin.css
app.js文件中添加端口号8200（可以随便定，只要不和其他的程序冲突即可）
app.listen(8200,function(err){
console.log("server started");
});
app.js中修改模板引擎为.html文件
app.set('view engine', 'html'); //设置模板文件的后缀名为.html
//运行ejs模板
app.engine(".html",require("ejs").__express);
index.html文件中构建表单并实现前端验证
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/signin.css" />
</head>
<body>
<h1><%= title %></h1>
<div id="container" class="container">
<% if(locals.success){%>
<div id="alt_success" class="alert alert-success">
<%- success%>
</div>
<%}%>
<% if(locals.error){%>
<div id="alt_warning" class="alert alert-warning">
<%=error%>
</div>
<%}%> <form class="form-signin" role="form" method="post" enctype="multipart/form-data">
<h2 class="form-signin-heading">上传文件</h2>
<input id="fulAvatar" name="fulAvatar" type="file" class="form-control" /><br/>
<button id="btnSub" class="btn btn-lg btn-primary" type="submit">上传</button>
</form>
</div>
</body>
<script src="/javascripts/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
String.prototype.format = function (args) {
var result = this;
if (arguments.length > 0) {
if (arguments.length == 1 && typeof (args) == "object") {
for (var key in args) {
if (args[key] != undefined) {
var reg = new RegExp("({" + key + "})", "g");
result = result.replace(reg, args[key]);
}
}
}
else {
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] != undefined) {
var reg = new RegExp("({)" + i + "(})", "g");
result = result.replace(reg, arguments[i]);
}
}
}
}
return result;
} $(function(){ $("#btnSub").on("click",function(){
var fulAvatarVal=$("#fulAvatar").val();
var errorTip='<div id="errorTip" class="alert alert-warning">{0}</div>'; $("#errorTip,#alt_warning").remove(); if(fulAvatarVal.length==0){
$("#container").prepend(errorTip.format("请选择要上传的文件"));
return false; } var extName=fulAvatarVal.substring(fulAvatarVal.lastIndexOf("."),fulAvatarVal.length).toLowerCase();
alert(extName);
if(extName!=".png" && extName!=".jpg"){
$("#container").prepend(errorTip.format("只支持png和jpg格式图片"));
return false;
}
return true;
});
})
</script>
</html>
index.html
这里一定要注意表单的enctype属性，这个就不多作解释了，如果是初次接触，看看http://www.w3school.com.cn/tags/att_form_enctype.asp
实现index.js中上传逻辑：
var express = require('express')
router = express.Router(),
formidable = require('formidable'),
fs = require('fs'),
TITLE = 'formidable上传示例',
AVATAR_UPLOAD_FOLDER = '/avatar/'
/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: TITLE });
});
router.post('/', function(req, res) {
var form = new formidable.IncomingForm(); //创建上传表单
form.encoding = 'utf-8'; //设置编辑
form.uploadDir = 'public' + AVATAR_UPLOAD_FOLDER; //设置上传目录
form.keepExtensions = true; //保留后缀
form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
form.parse(req, function(err, fields, files) {
if (err) {
res.locals.error = err;
res.render('index', { title: TITLE });
return;
}
var extName = ''; //后缀名
console.log("files.fulAvatar.type="+files.fulAvatar.type);
switch (files.fulAvatar.type) {
case 'image/pjpeg':
extName = 'jpg';
break;
case 'image/jpeg':
extName = 'jpg';
break;
case 'image/png':
extName = 'png';
break;
case 'image/x-png':
extName = 'png';
break;
}
if(extName.length == 0){
res.locals.error = '只支持png和jpg格式图片';
res.render('index', { title: TITLE });
return;
}
var avatarName = Math.random() + '.' + extName;
var newPath = form.uploadDir + avatarName;
console.log(newPath);
fs.renameSync(files.fulAvatar.path, newPath); //重命名
});
res.locals.success = '上传成功';
res.render('index', { title: TITLE });
});
module.exports = router;
index.js
注意：在public文件夹中创建avatar文件夹以供文件存放
运行结果：
在项目中遇到的问题：
由于在html中代码写成：
<input id="fulAvatar" name="fulAvater" type="file" class="form-control" /><br/>
而在index.js中部分代码如下：
form.parse(req, function(err, fields, files) {
if (err) {
res.locals.error = err;
res.render('index', { title: TITLE });
return;
}
var extName = ''; //后缀名
console.log("files.fulAvatar.type="+files.fulAvatar.type);
switch (files.fulAvatar.type) {
case 'image/pjpeg':
extName = 'jpg';
break;
case 'image/jpeg':
extName = 'jpg';
break;
case 'image/png':
extName = 'png';
break;
case 'image/x-png':
extName = 'png';
break;
}
if(extName.length == 0){
res.locals.error = '只支持png和jpg格式图片';
res.render('index', { title: TITLE });
return;
}
var avatarName = Math.random() + '.' + extName;
var newPath = form.uploadDir + avatarName;
console.log(newPath);
fs.renameSync(files.fulAvatar.path, newPath); //重命名
});
res.locals.success = '上传成功';
res.render('index', { title: TITLE });
运行之后总是报以下异常：
虽然报异常，但是上传图片确是成功的，界面显示上传成功。
原因是因为：
虽然form.parse方法中有异常，但是它是异步的，不妨碍以下代码的执行：
res.locals.success = '上传成功';
res.render('index', { title: TITLE });
上传成功是因为：
只要调用了form.parse方法就可以上传成功。
最终找到原因是因为html中上传控件的name值为：
<input id="fulAvatar" name="fulAvater" type="file" class="form-control" /><br/>
与index.js中的files.fulAuatar不一致导致的。
switch (files.fulAvatar.type) {
case 'image/pjpeg':
extName = 'jpg';
break;
case 'image/jpeg':
extName = 'jpg';
break;
case 'image/png':
extName = 'png';
break;
case 'image/x-png':
extName = 'png';
break;
}
把index.html中代码为以下即可：
<input id="fulAvatar" name="fulAvatar" type="file" class="form-control" /><br/>
具体参考：
http://www.cnblogs.com/zhongweiv/p/nodejs_express_formidable.html#node_web_install
NodeJs实现图片上传的更多相关文章
- nodejs 实现图片上传
1.首先在目录下的运行cmd,执行以下命令 npm install multer; 2.在router下新建upload.js let express = require('express');let ...
- 图片上传之FileAPI与NodeJs
HTML5之fileAPI HTML5之fileAPI使得我们处理图片上传更加简单. 实例 html代码 <div class="form-group"> <la ...
- nodeJs实现微信小程序的图片上传
今天我来介绍一下nodejs如何实现保存微信小程序传过来的图片及其返回 首先wx.uploadFile绝大部分时候是配合wx.chooseImage一起出现的,毕竟选择好了图片,再统一上传是实现用户图 ...
- nodejs图片上传
node中图片上传的中间键很多,比如formidable等,这里我们使用nodejs中的fs来实现文件上传处理: 1.安装中间键connect-multiparty npm install conne ...
- Nodejs之MEAN栈开发（四）---- form验证及图片上传
这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...
- 使用express+multer实现node中的图片上传
使用express+multer实现node中的图片上传 在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中 在n ...
- multer实现图片上传
multer实现图片上传: ejs代码: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 基于Node的React图片上传组件实现
写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循R ...
- Asp.Net Mvc 使用WebUploader 多图片上传
来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...
随机推荐
- traceroute 命令
通过traceroute我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不一 ...
- JDK自带的定时任务
import java.util.TimerTask; /** * 实现定时任务 * */ public class MyTimerTask extends TimerTask { @Override ...
- Pentaho 免费版本下载地址列表
Pentaho CE(Community Edition) 免费版本下载地址列表 http://sourceforge.net/projects/pentaho/files/Pentaho 插件名称 ...
- hdu1535——Invitation Cards
Invitation Cards Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- 【Mysql】之基础sql语句模板
==============新建数据库============ create database if not exists XXX; ==============删除数据库============ d ...
- JSP 开发环境搭建
JSP 开发环境搭建 JSP开发环境是您用来开发.测试和运行JSP程序的地方. 本节将会带您搭建JSP开发环境,具体包括以下几个步骤. 配置Java开发工具(JDK) 这一步涉及Java SDK的下载 ...
- cmake实战第一篇：初试 cmake
1.准备工作: 首先,在/code_test 目录下建立一个 cmake 目录,用来放置我们学习过程中的所有练习.(如果以下命令出现xxx: cannot create directory ‘x’: ...
- 【BZOJ3720】Gty的妹子树 块状树
[BZOJ3720]Gty的妹子树 我曾在弦歌之中听过你,檀板声碎,半出折子戏.舞榭歌台被风吹去,岁月深处尚有余音一缕……Gty神(xian)犇(chong)从来不缺妹子……他来到了一棵妹子树下,发现 ...
- Aeroplane chess(简单概率dp)
Hzz loves aeroplane chess very much. The chess map contains N+1 grids labeled from 0 to N. Hzz start ...
- 论JavaWeb前后端分离放弃jsp
1.静态资源使用Nginx反向代理Tomcat,Tomcat挂了网站仍可访问.2.静态与后端服务器分离,提升性能.3.大并发情况下,可同时扩展前后端服务器.4.接口可复用至App相关服务.5.网站热部 ...