☰

Nginx 上传模块与上传进度模块

tag-icon • tag-icon nginx http
Nginx 上传模块与上传进度模块

我正在尝试使用 nginx 设置文件上传服务器。我的 nginx 配置：

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    upload_progress proxied 1m;

    sendfile        on;

    keepalive_timeout  65;




server {
    listen       80;
    server_name  localhost;

client_max_body_size 5000M;
    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   html;
        index  index.html index.htm;

    }
location /progress {

    report_uploads proxied;
}
location /upload {
    # Pass altered request body to this location
    upload_pass @after_upload;

    # Store files to this directory
    upload_store /tmp;

    # Allow uploaded files to be read only by user
    #upload_store_access user:rw;

    upload_set_form_field $upload_field_name.name "$upload_file_name";
            upload_set_form_field $upload_field_name.path "$upload_tmp_path";

         # Inform backend about hash and size of a file
        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 "^usession$";

    upload_cleanup 400 404 499 500-505;

    track_uploads proxied 5s;
    }
    location @after_upload {
        proxy_pass http://tornadopastuploadprocessor:8888;
    }


}



}

带有一些 JS 的测试上传表单：

<!DOCTYPE html>
<html>
<html>
    <head>
  <script type="text/javascript" >
 interval = null;

 function openProgressBar() {
 /* generate random progress-id */
 uuid = "";
 for (i = 0; i < 32; i++) {
  uuid += Math.floor(Math.random() * 16).toString(16);
 }
  /* patch the form-action tag to include the progress-id */
  /* document.getElementById("upload").action="/upload?X-Progress-ID=" + uuid; */

  /* call the progress-updater every 1000ms */
  interval = window.setInterval(
   function () {
   fetch(uuid);
 },
   1000
  );
}

function fetch(uuid) {
  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) {
  /* poor-man JSON parser */
  var upload = eval(req.responseText);

   document.getElementById('tp').innerHTML = upload.state;

   /* change the width if the inner progress-bar */
   if (upload.state == 'done' || upload.state == 'uploading') {
 bar = document.getElementById('progressbar');
 w = 400 * upload.received / upload.size;
 bar.style.width = w + 'px';
}
/* we are done, stop the interval */
if (upload.state == 'done') {
 window.clearTimeout(interval);
   }
  }
  }
 }
 req.send(null);
}
 </script>
    <title>Test upload</title>
</head>
<body>

<form id="upload" enctype="multipart/form-data"
action="/upload" method="post" onsubmit="openProgressBar(); return true;">
<input type="hidden" name="MAX_FILE_SIZE" value="30000000"  />
<input name="userfile" type="file" label="fileupload" />
<input type="submit" value="Send 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>

</body>
    </html>

上传工作正常，但当我提交文件并想检查

 http://url/progress?X-Progress-ID=someid

返回的 JSON 始终是：

({ "state" : "starting" });

因此上传期间不会更新。

有什么建议么？

答案1

您修改操作属性的 javascript 已被注释掉，因此 nginx 无法跟踪您期望的 id 下的上传。

相关内容