Nodejs 传图片的两种方式
node上传图片第一种方式
1,首先引入模块 "connect-multiparty": "~1.2.5",
在package.json中添加 "connect-multiparty": "~1.2.5",
然后在命令中切换到项目目录,使用npm命令:npm installl;
基本配置完成
index.html
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<form action="/test" method="post">
姓名: <input type="text" name="name"><br>
年龄: <input type="text" name="age"><br>
<input type="submit" value="提交">
</form>
<br>
<span><a title="上串" href="/upload">上传</a></span>
<span><a href="/uploadtupian" title="上传">上传多个图片例子</a>></span>> </body>
</html>
app.js红色标注部分为上传图片代码
var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var ejs=require('ejs');
var routes = require('./routes/index');
var users = require('./routes/users');
var upload=require('./routes/upload');
var uploadtupian=require('./routes/uploadtupian');
var test=require('./routes/test');
var multer=require("multer");
var app = express();
var flash=require('connect-flash');
var md5=require('md5');
var fs = require('fs');
var multipart=require('connect-multiparty');
// view engine setup
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
app.use(flash());
//跨域请求
app.all('*',function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
if (req.method == 'OPTIONS') {
res.send(200);
}
else {
next();
}
});
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
/*app.use(express.bodyParser({uploadDir:'./public/.images'}));*/
app.use('/', routes);
app.use('/users', users);
app.use('/test', test);
app.use('/up',upload);
app.use('/uploadtupian',uploadtupian);
app.post('/upload', multipart(), function(req, res){
console.log(req.body.name);
//get filename
var filename = req.files.files.originalFilename || path.basename(req.files.files.ws.path);
//copy file to a public directory
//修改文件名
console.log(filename);
var newname=56;
var targetPath = path.dirname(__filename) + '/public/images/' + filename;
//copy file
fs.createReadStream(req.files.files.ws.path).pipe(fs.createWriteStream(targetPath));
var newname=path.dirname(__filename)+'/public/images/'+newname+'.jpg';
filename=fs.rename(targetPath,newname,function(err){
if(err){
console.log('改名失败');
}
else{
console.log("改名成功");
}
});
//return file url
res.json({code: 200, msg: {url: 'http://' + req.headers.host + '/' + newname}});
});
/* app.post('/file-upload', function(req, res) {
console.log(req);
// 获得文件的临时路径
var tmp_path = req.files.thumbnail.path;
// 指定文件上传后的目录 - 示例为"images"目录。
var target_path = './public/images/' + req.files.thumbnail.name;
// 移动文件
fs.rename(tmp_path, target_path, function(err) {
if (err) throw err;
// 删除临时文件夹文件,
fs.unlink(tmp_path, function() {
if (err) throw err;
res.send('File uploaded to: ' + target_path + ' - ' + req.files.thumbnail.size + ' bytes');
});
});
});*/
app.use('/upload',function(req,res){
res.render('upload',{
title:"文件上产"
});
});
/// catch 404 and forwarding to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
/*//文件上长
app.use(multer({
dest:'./public/images',
rename:function(fieldname,filename){
return filename;
}
}))*/
/// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
upload.html
<!DOCTYPE html>
<html>
<head>
<title><%=title%></title>
</head>
<body>
<form method='post' enctype='multipart/form-data' id = "fromUploadFile"> 姓名: <input type="text" name="name"><br>
<input type="file" name="files" class="from-control"><br> <button class='btn btn-primary' onclick="uploadFile()">上传</button>
</form>
<div class="cow" style="text-align: center">
<img id=imgShow>
<p id="#spanMessage"></p>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/ipload.js"></script> </html>
ipload.js
function uploadFile(){
var fromData=new FormData($("#fromUploadFile")[0]);
$.ajax({
url: '/uploadhaha',
type: 'post',
data: fromData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(data){
if(200 === data.code) {
$("#imgShow").attr('src', data.msg.url);
$("#spanMessage").html("上传成功");
} else {
$("#spanMessage").html("上传失败");
}
console.log('imgUploader upload success, data:', data);
},
error: function(){
$("#spanMessage").html("与服务器通信发生错误");
}
});
}
二.上传多组照片
导入模块 "formidable":"1.1.1"
在package.json中加入 "formidable":"1.1.1";
package.json
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "nodejs ./bin/www"
},
"dependencies": {
"express": "~4.0.0",
"static-favicon": "~1.0.0",
"morgan": "~1.0.0",
"cookie-parser": "~1.0.1",
"body-parser": "~1.0.0",
"debug": "~0.7.4",
"ejs": "~0.8.5",
"multer":"0.1.6",
"connect-flash": "0.1.1",
"md5":"^2.1.0",
"connect-multiparty": "~1.2.5",
"formidable":"1.1.1"
}
}
主要代码
app.use('/', routes);
app.use('/users', users);
app.use('/test', test);
app.use('/up',upload);
app.use('/uploadtupian',uploadtupian);
然后再router文件夹中
新建uploadtupian.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('up', { title: '上传多组图片' });
});
module.exports = router;
然后视图文件夹下
新建up.html
<!DOCTYPE html>
<html>
<head>
<title><%=title%></title>
</head>
<body>
'<form enctype="multipart/form-data" method="post" action="/up">'+
'<input type="text" name="name" /> '+
'<input type="text" name="password" /> '+
'<input type="file" name="file1" multiple="multiple" /> '+
'<input type="file" name="file2" multiple="multiple" /> '+
'<input type="submit" name="shangchuan" value="提交">'+
'</form>'
</body> </html>
app.js
中添加app.use('/up',upload);
在router文件夹中添加
upload.js文件
var express =require('express');
var path = require('path');
var router =express.Router();
var formidable=require('formidable');
var fs=require('fs');
router.post('/',function(req,res,next){
console.log(req.body);
var form=new formidable.IncomingForm();
form.uploadDir='/tmp';
form.keepExtensions=true;
var targetDir=path.join(__dirname,'../public/upload');
fs.access(targetDir,function(err){
if(err){
fs.mkdirSync(targetDir);
}
_fileParse();
});
function _fileParse(){
form.parse(req,function(err,fields,files){
console.log(fields);
if(err) throw err;
var fileUrl=[];
var errCount=0;
var keys=Object.keys(files);
keys.forEach(function(key){
var filePath=files[key].path;
var fileExt=filePath.substring(filePath.lastIndexOf('.'));
if(('.jpg.jpeg.png.gif').indexOf(fileExt.toLowerCase())==-1){
errCount+=1;
}
else{
var fileName=new Date().getTime()+fileExt;
var targetFile=path.join(targetDir,fileName);
//
fs.renameSync(filePath,targetFile);
fileUrl.push('/upload'+fileName);
}
})
res.json({fileUrl:fileUrl,success:keys.length-errCount, error:errCount})
})
}
})
module.exports=router;
至此完成两种node上传图片的方法
Nodejs 传图片的两种方式的更多相关文章
- ajax的data传参的两种方式
ajax的data传参的两种方式 本文为转载. 1.[javascript] view plain copy /** * 订单取消 * @return {Boolean} 处理是否成功 */ func ...
- nodejs触发事件的两种方式
nodejs触发事件的两种方式: 方式之一:通过实例化events.EventEmitter //引入events模块 var events = require('events'); //初始化eve ...
- jQuery 实现图片放大两种方式
jQuery 实现图片放大两种方式 一.利用css样式表实现,多用于后台显示 1.这种比较简单,利用dom元素的hover实现样式切换 <style> img{ cursor: point ...
- UIImage加载本地图片的两种方式
UIImage加载图片方式一般有两种: (1)imagedNamed初始化:默认加载图片成功后会内存中缓存图片,这个方法用一个指定的名字在系统缓存中查找并返回一个图片对象.如果缓存中没有找到相应的图片 ...
- UIImage创建图片的两种方式的区别
在工作中经常会遇到添加图片,用哪种方式添加更好呢?请看详解 方法一: UIImage *image = [UIImage imageNamed:@"haha"]; 这种方法创建的图 ...
- jq ajax传参的两种方式
第一种 在url ? 后通过拼接传参 第二种 通过data传参 (1)第一种方法:(通过url传参) function GetQuery(id) { if (id ==1||id==7) { ...
- android绘制圆形图片的两种方式
看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap ...
- button上加上图片的两种方式
//// ViewController.m// UIButtonDemo//// Created by hehe on 15/9/15.// Copyright (c) 2015年 wang. ...
- Github 上传代码的两种方式
上传本地代码/文件->Github 折腾了半天时间... Github前期准备部分 1)登录github,新建一个 repository 2)repository 命名 3)Github是一个托 ...
随机推荐
- swift - 封装百度地图
1. #import <BaiduMapAPI_Base/BMKBaseComponent.h>//引入base相关所有的头文件 #import <BaiduMapAPI_Map/B ...
- Asp.net Mvc之Action如何传多个参数
最近,工作上有一个需要:用户查询日志文件信息,查看某一个具体日志信息,可能同时查看该日志所在日期的其他日志信息列表. 为完成此功能,我打算在URL中传入了两个参数,一个记录此日志时间,另外一个记录日志 ...
- Bootstrap(10) 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果. <!-- //嵌入效果 --> <div class="well">Bootstrap</div& ...
- springmvc入门(1)
一..springmvc框架 1.什么是springmvc springmvc是spring框架的一个模块,springmvc和spring无需通过中间整合层进行整合.springmvc是一个基于mv ...
- Python数据分析--Pandas知识点(二)
本文主要是总结学习pandas过程中用到的函数和方法, 在此记录, 防止遗忘. Python数据分析--Pandas知识点(一) 下面将是在知识点一的基础上继续总结. 13. 简单计算 新建一个数据表 ...
- 30-算法训练 最短路 spfa
http://lx.lanqiao.cn/problem.page?gpid=T15 算法训练 最短路 时间限制:1.0s 内存限制:256.0MB 问题描述 给定一个n个顶点, ...
- Failed to read artifact descriptor for xxx:jar的问题解决
在开发的过程中,尤其是新手,我们经常遇到Maven下载依赖jar包的问题,也就是遇到“Failed to read artifact descriptor for xxx:jar”的错误. 对于这种非 ...
- sqlserver 分区排序之partition
例如:按照课程分组取各个课程最高成绩的记录,使用partition分区,然后按照成绩倒序排列,需要注意的是考虑到可能出现多个相同最高分,使用dense_rank来实现连续排序. 参考链接:https: ...
- 10.24JS日记
1.函数都有返回值,人为return,返回什么就是什么,否则,他的返回值就是undefined 而方法的本质也是函数,所以也有返回值 document.getElementById()返回的是获取的标 ...
- Get、Post 提交的乱码问题
1.问题 在spring mvc开发的时候出现乱码问题: 2.解决方案 (1)Get提交:tomcat容器接收的造成的乱码问题,修改server.xml文件: (2)Post提交:在web.xml中配 ...