使用nginx实现文件上传

Question

使用nginx实现文件上传

tiodot opened this issue 6 years ago · 0 comments

安装nginx以及nginx-upload-module模块

下载nginx源码，添加模块只支持源码编译：

wget http://nginx.org/download/nginx-1.12.2.tar.gz
// 解压
tar zxvf nginx-1.12.2.tar.gz

安装编译依赖，可以先使用 ./configure查看缺少哪些依赖：

yum -y install pcre-devel openssl openssl-devel

下载nginx-upload-module：

wget https://github.com/fdintino/nginx-upload-module/archive/2.3.0.tar.gz
// 解压
tar zxvf 2.3.0.tar.gz

准备编译安装：

cd  nginx-1.12.2
./configure --add-module=../nginx-upload-module-2.3.0/ --prefix=/usr/local/nginx
make
make install

启动nginx:

/usr/local/nginx/sbin/nginx

配置nginx，实现文件上传功能

因为编译安装nginx指定了 --prefix=/usr/local/nginx，故所有nginx相关配置都在/usr/local/nginx下面。

这里主要关注三个目录：

/usr/local/nginx/conf：存储nginx相关配置文件；
/usr/local/nginx/html: 存放静态文件，当然也可以在配置文件中修改；
/usr/local/nginx/logs: 日志存放目录，有时需要定位一些问题问题时，可以有帮助；

修改/usr/local/nginx/conf/nginx.conf文件，添加：

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
        ## -------> 新增内容 <-------------------
        location /upload {
            upload_pass /res_upload;
            upload_store /usr/local/nginx/html;
        }
        location /res_upload {
            default_type text/html;
            return 200 "success";
        }
        ## <------ 新增内容结束 ------------------->
}

保存，然后重新加载配置：

 /usr/local/nginx/sbin/nginx -s reload

然后在 /usr/local/nginx/html目录下新增一个 file.html(名字别用 upload.html 不然会命中 /upload 这个location的规则，踩坑才跳出来)，用于浏览器上传文件使用：

<html>
  <head>
    <title>Test upload</title>
  </head>
  <body>
    <h2>Select files to upload</h2>
    <form name="upload" method="POST" enctype="multipart/form-data" action="/upload">
      <input type="file" name="file"><br>
      <button type="submit"> Upload </button>
    </form>
  </body>
</html>

然后再浏览器打开： http://xxxx/file.html就可以上传文件了：

使用node服务重命名文件

修改nginx配置，将请求转发到到node服务中

具体配置：

    location /upload {
           upload_pass /res_upload;
            upload_store /usr/local/nginx/html;
            upload_resumable on;
            upload_state_store /tmp/state;
            upload_set_form_field "${upload_field_name}_name" $upload_file_name;
            upload_set_form_field "${upload_field_name}_content_type" $upload_content_type;
            upload_set_form_field "${upload_field_name}_path" $upload_tmp_path;

            upload_aggregate_form_field "${upload_field_name}_md5" $upload_file_md5;
            upload_aggregate_form_field "${upload_field_name}_size" $upload_file_size;
        }
        location /res_upload {
            #default_type text/html;
            #return 200 "success";
            proxy_pass http://localhost:8080;
        }

查看请求中的form data：
解析请求中的form data为json形式：
根据文件位置，重命名文件

具体代码为：

const http = require('http');
const fs = require('fs');

http.createServer((req, res) => {
  let body = '';
  req.on('data', chunk => {
    body += chunk; // 获取form-data
  });
  req.on('end', () => {
    console.log(body);
    const params = parseForm(body); // json化参数
    rename(params.file_path, params.file_name);
    res.end('success: you can get it from: /' + params.file_name);
  })
}).listen(8080)

function parseForm(data) {
  const reg = /name="([\w_]+)"\s+(.+)\s/g;
  const params = {};
  let matched;
  while((matched = reg.exec(data))){
    params[matched[1]] = matched[2];
  }
  console.log(params);
  return params;
}

function rename(source, name){
  const path = require('path');
  const dir = path.dirname(source);
  fs.renameSync(source, path.join(dir, name));
}

安装nginx以及nginx-upload-module模块

配置nginx，实现文件上传功能

使用node服务重命名文件

参考