图片上传请求由Node处理,图片访问请求由Nginx处理。
1、Nginx配置
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main ‘$remote_addr - $remote_user [$time_local] "$request" ‘ # ‘$status $body_bytes_sent "$http_referer" ‘ # ‘"$http_user_agent" "$http_x_forwarded_for"‘; #access_log logs/access.log main; sendfile on; tcp_nopush on; sendfile_max_chunk 256K; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; upstream localhost { server localhost:3000;#node服务器 } server { listen 80; server_name localhost; #开启索引功能 autoindex on; #关闭计算文件确切大小 autoindex_exact_size off; #charset koi8-r; #access_log logs/host.access.log main; #上传操作由node服务器处理 location / { proxy_pass http://localhost; index index.html; } #映射图片访问url location /image/ { expires 30d;#缓存时间 root E:/Study/nginx/nginx-1.7.6/files; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache‘s document root # concurs with nginx‘s one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} }
2、nodejs项目架构
1)项目结构图
2)bin/www 是启动脚本
#!/usr/bin/env node var debug = require(‘debug‘)(‘file-server‘); var app = require(‘../app‘); app.set(‘port‘, process.env.PORT || 3000); var server = app.listen(app.get(‘port‘), function() { console.log(‘Express server listening on port ‘ + server.address().port); debug(‘Express server listening on port ‘ + server.address().port); });
3)config/setting.json 是程序中用的一些常量以json格式配置
{ "image_url":"http://localhost/image", "image_dir":"E:/Study/nginx/nginx-1.7.6/files/image", "tmp_dir":"E:/Study/nginx/nginx-1.7.6/tmp" }
4)controller/file-ctrl.js 是文件上传的处理代码
var fs = require(‘fs‘); var path = require(‘path‘); var formidable = require(‘formidable‘); var util = require(‘util‘); var fs = require(‘fs‘); var path = require(‘path‘); var setting = require(‘../config/setting.json‘); /** * 上传 */ exports.upload = function(req,res){ var form = new formidable.IncomingForm(); form.encoding = ‘utf-8‘; //如果需要临时文件保持原始文件扩展名,设置为true form.keepExtensions = false; //文件大小限制,默认2MB form.maxFieldsSize = 2 * 1024 * 1024; //图片存放目录 var imageDir = setting.image_dir; //上传临时目录 var tmpDir = setting.tmp_dir; form.uploadDir = tmpDir;//目录需要已存在 /** * fields 表单中的其他属性 * files 文件集合 */ form.parse(req, function(err, fields, files) { //图片完整路径 var imagePath = path.resolve(imageDir, files.file.name); //将临时目录中的图片移动到图片存放目录下 fs.rename(files.file.path,imagePath,function(err){ if(err) { res.json({‘success‘:false,‘msg‘:err}); }else{ var image_url = setting.image_url+‘/‘+files.file.name; res.json({‘success‘:true,‘msg‘:‘上传成功!‘,‘image_url‘:image_url}); //res.json({‘success‘:true,‘msg‘:‘上传成功!‘,‘image_url‘:image_url,‘fields‘:util.inspect({fields: fields, files: files})}); } }); }); } /** * 下载 */ exports.download = function(req,res){ var filename = req.params.filename; var dir = setting.file_dir; var file_path = path.resolve(dir,filename); fs.exists(file_path,function(exists) { if(!exists) { res.json({‘success‘:false,‘msg‘:‘文件不存在!‘}); }else{ res.download(file_path,function(err){ if(err) { res.json({‘success‘:false,‘msg‘:err}); } }); } }); }
5)routes/route.js 是整个项目的路由控制
var express = require(‘express‘); var router = express.Router(); var file_ctrl = require(‘../controller/file-ctrl‘) /**上传文件*/ router.post(‘/upload‘,file_ctrl.upload); module.exports = router;
6)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 routes = require(‘./routes/route‘); var app = express(); // view engine setup app.set(‘views‘, path.join(__dirname, ‘views‘)); app.set(‘view engine‘, ‘jade‘); 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(‘/‘, routes); /// catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error(‘Not Found‘); err.status = 404; next(err); }); /// 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;
6)package.json 是依赖包管理
{ "name": "file-server", "version": "0.0.1", "private": true, "scripts": { "start": "node ./bin/www" }, "dependencies": { "express": "~4.2.0", "static-favicon": "~1.0.0", "morgan": "~1.0.0", "cookie-parser": "~1.0.1", "body-parser": "~1.0.0", "debug": "~0.7.4", "jade": "~1.3.0", "formidable":"*" } }
项目用到了expressjs框架。
3、简单写一个html上传页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>upload</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <form action="http://localhost/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <p> <input type="submit" value="上传"> </form> </body> </html>
4、启动node服务器和Nginx服务器
进入项目根目录,执行 node bin\www
5、测试
1)上传图片
2)上传成功
3)直接访问image_url就可以看到图片了
时间: 2024-11-09 02:51:55