nginx delete form表单收不到参数_HTTP 文件上传的一个后端完善方案（NginX）

(给PHP开发者加星标，提升PHP技能)

转自：林伯格
https://breeze2.github.io/blog/scheme-nginx-php-js-upload-process

前言

很多网站都会有上传文件的功能，比如上传用户头像，上传个人简历等等，除非是网盘类的网站，一般上传文件不会作为网站的主要功能；而且，如今大众的网速已经是足够的快，上传几百KB的文件，几乎可以秒内完成。

但是，随着文件大小和类型越来越庞大，文件上传也就越值得我们重视。

大多数网站，对于上传文件的处理，都是简单的前端POST上传，后端验证存放然后返回访问地址。毕竟，文件小，网速快，一瞬间的事情谁会多在意呢？

存在问题

假设我们有一个网站，基于NginX+PHP+JS构架，网站允许用户上传一些小视频、音乐或者PPT等文件在线上展示，单个文件大小限制不超过30MB，那么我们要怎样实现这个上传功能呢？

限制上传文件的大小

首先，NginX要能接受最大32MB的请求(除了最大文件本身30MB，再预留一些给其他请求参数)，我们会修改网站的虚拟主机配置：

# website.conf server {    client_max_body_size 32M;     ...}

然后，PHP也要修改配置，接受最大30MB的文件上传和最大32MB的POST请求：

# php.iniupload_max_filesize = 30M;post_max_size = 32M;

其实，单凭client_max_body_size，NginX是不能真正限制上传文件大小的，因为NginX会先让客户端(一般是浏览器)开始上传请求，直到上传的内容大小超过了限制，NginX才会中止上传，报413 Request Entity Too Large错误，没超过限制则交给PHP处理。

于是，PHP的upload_max_filesize和post_max_size就更没用了，因为PHP获取到文件信息的时候，上传过程已经结束了(这时当然是上传成功，NginX中止请求的话PHP不会进场)。在NginX传递请求结果前，PHP什么(比如验证用户，验证权限等等)都做不了。

如果用户上传了一个大于32MB的时候，直到上传到32MB的时候才能告诉用户文件过大了，那么前面的时间用户不就白等了吗？而且服务器的带宽还是一样被消耗了。

我们更希望在上传开始前就能告诉用户文件过大了。很多网站开发，都会把这一步交给JS处理，在新型浏览器(支持HTML5)里，JS的确可以获取input文件的大小；在旧的IE里，也可以通过ActiveX来实现。但是JS的限制处理很容易被绕过去，只要知道上传地址，一个form标签就能把文件传过去：

<form id="upload_form" action="/path/to/upload" enctype="multipart/form-data" method="post">    <input type="file" name="upload_file" value="/path/of/big/big/file" />    <input type="submit" value="Upload" />form>

正常的用户当然不会这样做，但是有意攻击网站的人会。

限制上传文件的速度

如果服务器的入口带宽是100mbps，用户的上行带宽是10mbps，用户上传一个30MB的文件至少需要30秒，那么在30秒内，服务器的带宽只能满足10个用户上传文件，带宽被占满后，服务器就很难再处理其他请求了。

所以，限制用户上传文件的速度就很有必要。目前，JS做不到限制上传文件的速度，PHP也做不到。

上传文件的进度

用户上传一个30MB的文件至少需要30秒，那么30秒内应该告知用户上传的进度，不能让用户无感知的等待。HTML5改进了XMLHttpRequest对象，在支持HTML5的新型浏览器里，JS可以获取XMLHttpRequest上传文件的进度；在旧的浏览器的也可以通过Flash与JS结合(比如SWFUpload)，从而获取上传文件的进度。

但是新型浏览器里，Flash已经被摒弃了，因而要支持新旧浏览器，JS就要写成两套代码。在这里PHP也是帮不上忙，因为PHP拿到传文件信息的时候，上传已经结束了。

解决方案

网站是NginX+PHP+JS构架的，PHP和JS解决不了的问题，那应该在NginX上解决它。NginX虽然是一个现成的软件，但是它还是可以继续扩展和修改的。

NginX本身没有提供上传文件的复杂处理功能，而在NginX官方认可的第三方扩展模块里，有两个模块可以帮助我们实现复杂的上传文件功能，分别是nginx-upload-module和nginx-upload-progress-module。

要将nginx-upload-module和nginx-upload-progress-module编译进NginX，首先要下载NginX源码和nginx-upload-module、nginx-upload-progress-module这两个模块的源码，然后在NginX源码目录中，在configure参数中加入这两个这两个模块，最后make install，大概的执行命令：

$ cd ~$ mkdir tmp$ cd tmp$ wget http://nginx.org/download/nginx-1.11.3.tar.gz$ tar -xvzf nginx-1.11.3.tar.gz$ git clone https://github.com/vkholodkov/nginx-upload-module.git$ git clont https://github.com/masterzen/nginx-upload-progress-module.git$ cd nginx-1.11.3$ ./configure --add-module=~/tmp/nginx-upload-module --add-module~/tmp/nginx-upload-progress-module ...$ make$ make install

如果系统上已经安装过NginX并且所安装NginX版本支持动态模块，那么可以考虑将nginx-upload-module和nginx-upload-progress-module编译成动态模块，这样就不需要重新安装NginX。

nginx-module-libs上有Ubuntu系统上主线NginX版本的一些动态模块，可以上面下载适配你的nginx-upload-module和nginx-upload-progress-module。

下面主要介绍一下两个模块的用法：

nginx-upload-module

当上传文件的体积小于client_max_body_size时， nginx-upload-module可以帮助我们限制上传速度，使用方法见下。

NginX的站点配置：

# website.confserver {    ...    client_max_body_size 32m;    # 限制上传速度最大2Mbps    upload_limit_rate 256k;    location /upload {        # 限制上传文件最大30MB        upload_max_file_size 30m;        # 后续交给 upload.php 处理        upload_pass /upload.php;        # 指定上传文件存放目录，1表示按1位散列，将上传文件随机存到指定目录下的0、1、2、...、8、9目录中(这些目录要手动建立)        upload_store /tmp 1;        # 上传文件的访问权限，user:r表示用户只读        upload_store_access user:r;        # 设置请求体的字段        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";        # 指示后端关于上传文件的md5值和文件大小        upload_aggregate_form_field "${upload_field_name}_md5" "$upload_file_md5";        upload_aggregate_form_field "${upload_field_name}_size" "$upload_file_size";        upload_pass_form_field "^submit$|^description$";        # 若出现如下错误码则删除上传的文件        upload_cleanup 400 404 499 500-505;    }}

上传文件的页面：

<form id="upload" enctype="multipart/form-data" action="/upload" method="post" >    <input name="upload_file" type="file" label="fileupload" />    <input type="submit" value="Upload File" />form>

处理上传结果的脚本：

　php// upload.phpprint_r($_REQUEST);

如果对PHP解析使用了优雅链接，比如Laravel，那么应该这样使用：

NginX的站点配置：

# website.confserver {    ...    client_max_body_size 32m;    # 限制上传速度最大2Mbps    upload_limit_rate 256k;    location / {        try_files $uri $uri/ /index.php?$query_string;    }    location ~ \.php$ {        include snippets/fastcgi-php.conf;        fastcgi_param HTTP_PROXY "";        fastcgi_pass unix:/run/php/php-fpm.sock;    }    location @upload_handle {        rewrite ^ /index.php last;    }    location /upload {        # 限制上传文件最大30MB        upload_max_file_size 30m;        # 后续交给 index.php 处理        upload_pass @upload_handle;        # 指定上传文件存放目录，1表示按1位散列，将上传文件随机存到指定目录下的0、1、2、...、8、9目录中(这些目录要手动建立)        upload_store /tmp 1;        # 上传文件的访问权限，user:r表示用户只读        upload_store_access user:r;        # 设置请求体的字段        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";        # 指示后端关于上传文件的md5值和文件大小        upload_aggregate_form_field "${upload_field_name}_md5" "$upload_file_md5";        upload_aggregate_form_field "${upload_field_name}_size" "$upload_file_size";        upload_pass_form_field "^submit$|^description$";        # 若出现如下错误码则删除上传的文件        upload_cleanup 400 404 499 500-505;    }}

上传文件的页面：

<form id="upload?_token={{csrf_token()}}" enctype="multipart/form-data" action="/upload" method="post" >    <input name="upload_file" type="file" label="fileupload" />    <input type="submit" value="Upload File" />form>

Laravel路由配置：

<?php // routes/web.phpRoute::post('/upload', 'Web\IndexController@upload')->name('upload');

Laravel控制器中处理上传的方法：

<?php // Web/IndexController.phpfunction upload() {    dump(request());}

nginx-upload-progress-module

nginx-upload-progress-module可以帮助我们跟踪上传的进度，使用方法见下。

NginX的站点配置：

# website.confserver {    ...    client_max_body_size 32m;    # 开辟一个空间proxied来存储跟踪上传的信息1MB    upload_progress proxied 1m;    location ^~ /progress {        # 报告上传的信息        report_uploads proxied;    }    location /upload {        ...        # 上传完成后，仍然保存上传信息5s        track_uploads proxied 5s;    }}

上传文件的页面和每隔一秒查询一下上传进度的脚本：

<form id="upload" enctype="multipart/form-data" action="/upload" method="post" onsubmit="openProgressBar(); return true;">    <input name="userfile" type="file" label="fileupload" />    <input type="submit" value="Upload File" />form><div>    <div id="progress" style="width: 400px; border: 1px solid black">        <div id="progressbar" style="width: 1px; background-color: black; border: 1px solid white"> div>    div>   <div id="tp">(progress)div>div><script type="text/javascript">    var interval = null;    var uuid = "";    function openProgressBar() {        for (var i = 0; i < 32; i++) {            uuid += Math.floor(Math.random() * 16).toString(16);        }        document.getElementById("upload").action = "/upload?X-Progress-ID=" + uuid;        /* 每隔一秒查询一下上传进度 */        interval = window.setInterval(function () {            fetch(uuid);        }, 1000);    }    function fetch(uuid) {        var req = new XMLHttpRequest();        req.open("GET", "/progress", 1);        req.setRequestHeader("X-Progress-ID", uuid);        req.onreadystatechange = function () {            if (req.readyState == 4) {                if (req.status == 200) {                    var upload = eval(req.responseText);                    document.getElementById('tp').innerHTML = upload.state;                    /* 更新进度条 */                    if (upload.state == 'done' || upload.state == 'uploading') {                        var bar = document.getElementById('progressbar');                        var w = 400 * upload.received / upload.size;                        bar.style.width = w + 'px';                    }                    /* 上传完成，不再查询进度 */                    if (upload.state == 'done') {                        window.clearTimeout(interval);                    }                    if (upload.state == 'error') {                        window.clearTimeout(interval);                        alert('something wrong');                    }                }            }        }        req.send(null);    }script>

当上传文件的体积大于client_max_body_size时， nginx-upload-module未能帮我们立刻中断上传，并且不能限制上传速度，但是nginx-upload-progress-module可以向前端报告文件过大的错误，前端可以这样子来中断上传：

<form id="upload" enctype="multipart/form-data" action="/upload" method="post" onsubmit="openProgressBar(); return false;">    <input name="userfile" type="file" label="fileupload" id="userfile" />    <input type="submit" value="Upload File" />form><div>    <div id="progress" style="width: 400px; border: 1px solid black">        <div id="progressbar" style="width: 1px; background-color: black; border: 1px solid white"> div>    div>   <div id="tp">(progress)div>div><script type="text/javascript">    var interval = null;    var uuid = "";    var uploadxhr = null;     function openProgressBar() {        for (var i = 0; i < 32; i++) {            uuid += Math.floor(Math.random() * 16).toString(16);        }        var action = "/upload?X-Progress-ID=" + uuid;        var file = document.getElementById('userfile').files[0];        uploadxhr = new XMLHttpRequest();        // uploadxhr.file = file;        uploadxhr.open('post', action, true);        uploadxhr.setRequestHeader("Content-Type","multipart/form-data");        uploadxhr.send(file);        /* 每隔一秒查询一下上传进度 */        interval = window.setInterval(function () {            fetch(uuid);        }, 1000);    }    function fetch(uuid) {        var req = new XMLHttpRequest();        req.open("GET", "/progress", 1);        req.setRequestHeader("X-Progress-ID", uuid);        req.onreadystatechange = function () {            if (req.readyState == 4) {                if (req.status == 200) {                    var upload = eval(req.responseText);                    document.getElementById('tp').innerHTML = upload.state;                    /* 更新进度条 */                    if (upload.state == 'done' || upload.state == 'uploading') {                        var bar = document.getElementById('progressbar');                        var w = 400 * upload.received / upload.size;                        bar.style.width = w + 'px';                    }                    /* 上传完成，不再查询进度 */                    if (upload.state == 'done') {                        window.clearTimeout(interval);                    }                    if (upload.state == 'error') {                        window.clearTimeout(interval);                        uploadxhr.abort();                        alert('something wrong');                    }                }            }        }        req.send(null);    }script>

另外

nginx-upload-module和nginx-upload-progress-module还提供了更多的指令，帮忙我们实现更复杂的上传文件功能，比如断点续传等，有兴趣可以阅读两个模块的官方文档，了解更多。

另外，因为nginx-upload-module未能及时拦下体积过大的文件上传，所以，尽管保障了用户的正常使用，可是依然不能防范恶意的流量攻击。

nginx-upload-progress-module能够在一开始就检测到上传文件的体积是否过大(HTTP请求头里的Content-Length存有文件的体积大小)，这时候就应该中断上传(可能是NginX限制，扩展模块无法中断HTTP请求)，大家有兴趣的话可以研究一下NginX源码和扩展开发。

思考

NginX的client_max_body_size设为32m，攻击者可以上传1GB的文件，直到上传到32MB的时候，NginX才会中断上传，服务器被消耗了32MB的流量。细想一下：

即使NginX在一开始就拦下了体积大于32MB的文件，可是攻击者依然可以直接上传30MB大小的文件，服务器还是会被消耗了30MB的流量，所以在一开始就拦截的意义并不大；
可是上传文件的体积大于client_max_body_size时，nginx-upload-module的限速功能不起作用，这就成问题了；
NginX没有直接信任请求头的Content-Length，应该有他的依据，不过正常用户不会虚报吧(即使报小也不报大啊)；
看来这个方案还需继续完善，或者借助现成的云存储服务来实现文件上传功能(可参考腾讯云COS的一次实践)。