代码之家 › 专栏 › 技术社区 › Developer

码头工人,Nginx。PHP fpm上传进度条不工作

fpm nginx docker symfony php

Developer · 技术社区 · 6 年前

services:
    webserver:
      image: nginx:alpine

nginx.con公司

user nginx;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/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 /dev/stdout  main;

    #sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    gzip  on;


 server {


     listen 80 default;

     client_max_body_size 208M;

     access_log /var/log/nginx/application.access.log;

     root /application/public;

     rewrite ^/index\.php/?(.*)$ /$1 permanent;

     try_files $uri @rewriteapp;

     location @rewriteapp {
         rewrite ^(.*)$ /index.php/$1 last;
     }

     # Deny all . files
     location ~ /\. {
         deny all;
     }

     location ~ ^/(index)\.php(/|$) {
         fastcgi_pass php-fpm:9000;
         fastcgi_split_path_info ^(.+\.php)(/.*)$;
         fastcgi_index app_dev.php;
         send_timeout 1800;
         fastcgi_read_timeout 1800;
         fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
         fastcgi_param PHP_VALUE "error_log=/var/log/nginx/application_php_errors.log";
         fastcgi_buffers 16 16k;
         fastcgi_buffer_size 32k;
         include fastcgi_params;
     }

     # Statics
         location /(bundles|media) {
         access_log off;
         expires 30d;
         try_files $uri @rewriteapp;
     }}

}

 /**
     * @Route("/progressTest", name="progressTest")
     * @param Request $request
     * @return \Symfony\Component\HttpFoundation\Response
     */
    public function progressAction(){

        ob_start();
        header('Content-Type: text/event-stream');
        header('Cache-Control: no-cache');

        $total = 10;
        for($i=0;$i<$total;$i++)
        {

            $percent = intval($i/$total * 100)."%";

            sleep(1); // Here call your time taking function like sending bulk sms etc.

            echo '<script>
            parent.document.getElementById("progressbar").innerHTML="<div style=\"width:'.$percent.';background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\">&nbsp;</div>";
            parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">'.$percent.' is processed.</div>";
            </script>';

            ob_flush();
            flush();


        }
        echo '<script>parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">Process completed</div>"</script>';


        return new Response('OK '.$i);


    }

在模板中运行

  <div class="col-md-12">
                        <div id="progressbar" style="border:1px solid #ccc; border-radius: 5px; "></div>
                        <div id="information" style="border:1px solid #ccc; border-radius: 5px; "></div>
                    </div>
                    <iframe name="loadarea" src="{{ path("progressTest") }}" id="loadarea" style="display:none2;"></iframe><br />

<script>
            parent.document.getElementById("progressbar").innerHTML="<div style=\"width:0%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\">&nbsp;</div>";
            parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">0% is processed.</div>";
            </script><script>
            parent.document.getElementById("progressbar").innerHTML="<div style=\"width:10%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\">&nbsp;</div>";
            parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">10% is processed.</div>";
            </script><script>
            parent.document.getElementById("progressbar").innerHTML="<div style=\"width:20%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\">&nbsp;</div>";
            parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">20% is processed.</div>";
            </script><script>
            parent.document.getElementById("progressbar").innerHTML="<div style=\"width:30%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\">&nbsp;</div>";
            parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">30% is processed.</div>";
            </script><script>
            parent.document.getElementById("progressbar").innerHTML="<div style=\"width:40%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\">&nbsp;</div>";
            parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">40% is processed.</div>";
            </script><script>
            parent.document.getElementById("progressbar").innerHTML="<div style=\"width:50%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\">&nbsp;</div>";
            parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">50% is processed.</div>";
            </script><script>
            parent.document.getElementById("progressbar").innerHTML="<div style=\"width:60%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\">&nbsp;</div>";
            parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">60% is processed.</div>";
            </script><script>
            parent.document.getElementById("progressbar").innerHTML="<div style=\"width:70%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\">&nbsp;</div>";
            parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">70% is processed.</div>";
            </script><script>
            parent.document.getElementById("progressbar").innerHTML="<div style=\"width:80%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\">&nbsp;</div>";
            parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">80% is processed.</div>";
            </script><script>
            parent.document.getElementById("progressbar").innerHTML="<div style=\"width:90%;background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\">&nbsp;</div>";
            parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">90% is processed.</div>";
            </script><script>parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">Process completed</div>"</script>OK 10

如何更新progressbar?

1 回复 | 直到 6 年前

Jovan Perovic 6 年前

X-Accel-Buffering ,如中所述 Streaming a Response 正式文件的一节。基本上,您的FPM不会缓冲任何东西,但是NGINX会缓冲,因此最终您将得到大量的东西。

no 看看有什么用。

在旁注上,返回 <script> 像这样的标签看起来像是拿着剪刀在跑。我建议您完全重构它,让客户端只对百分比进行图形化操作。