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