共计 7625 个字符,预计需要花费 20 分钟才能阅读完成。
图片上传请求由 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=”https://www.linuxidc.com/Linux/2015-08/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 或 npm start (这个是在 package.json 中配置的脚本命令 ”scripts”)
5、测试
1)上传图片
2)上传成功
3)直接访问 image_url 就可以看到图片了
更多 Nginx 相关教程见以下内容 :
CentOS 6.2 实战部署 Nginx+MySQL+PHP http://www.linuxidc.com/Linux/2013-09/90020.htm
使用 Nginx 搭建 WEB 服务器 http://www.linuxidc.com/Linux/2013-09/89768.htm
搭建基于 Linux6.3+Nginx1.2+PHP5+MySQL5.5 的 Web 服务器全过程 http://www.linuxidc.com/Linux/2013-09/89692.htm
CentOS 6.3 下 Nginx 性能调优 http://www.linuxidc.com/Linux/2013-09/89656.htm
CentOS 6.3 下配置 Nginx 加载 ngx_pagespeed 模块 http://www.linuxidc.com/Linux/2013-09/89657.htm
CentOS 6.4 安装配置 Nginx+Pcre+php-fpm http://www.linuxidc.com/Linux/2013-08/88984.htm
Nginx 安装配置使用详细笔记 http://www.linuxidc.com/Linux/2014-07/104499.htm
Nginx 日志过滤 使用 ngx_log_if 不记录特定日志 http://www.linuxidc.com/Linux/2014-07/104686.htm
Nginx 的详细介绍 :请点这里
Nginx 的下载地址 :请点这里
本文永久更新链接地址 :http://www.linuxidc.com/Linux/2015-08/120934.htm