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上传图片的方法