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