nginx服務(wù)器實現(xiàn)上傳下載文件的實例代碼

更新時間：2024年02月01日 11:18:05 作者：三遍豬

這篇文章主要介紹了nginx服務(wù)器實現(xiàn)上傳下載文件的實例代碼,本文通過代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

下載

更新配制文件，添加如下字段，這里用alias實現(xiàn)把嵌入式開發(fā)板的根目錄全部映射過去，

location /download {
    alias   /;
    autoindex on; 
    autoindex_localtime on;
    autoindex_exact_size off;
}

執(zhí)行，

$ ./nginx/sbin/nginx -p ./nginx -s reload

上傳

需要有nginx的源碼，重新編譯nginx，添加上傳模塊，上傳進度模塊，

$ ./configure --add-module=$parent_path/nginx-upload-module-2.3.0 --add-module=$parent_path/nginx-upload-progress-module-0.8.4
$ make
$ make install

注意上傳進度模塊，到0.9版本有一個不兼容的更改，

in version 0.9.0 there is INCOMPATIBLE CHANGE: JSONP is now the default output of the progress probes. If you rely on this module serving the deprecated java output use:

upload_progress_java_output
in the progress probe location.

添加配置文件，

location /upload {  
    upload_pass     /;  
    # upload_cleanup 400 404 499 500-505;  
    upload_store    /boot;  
    upload_store_access user:rw;  
    # upload_limit_rate 128k;  
    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;  
    upload_pass_form_field "^.*$";  
}

建立html測試，使用fcgi，

printf("<form method=\"POST\" enctype=\"multipart/form-data\" action=\"uploademmc\"\n");
printf("<p>File Upload:\n");
printf("<input type=\"file\" name=\"file\" value=\"\">\n");
printf("<p>\n");
printf("<input type=\"submit\" name=\"uploademmc\" value=\"uploademmc\">\n");
printf("<p>\n");
printf("</form>\n");

上傳，0000000001即為新上傳的文件，這里必須用腳本在上傳結(jié)束后來執(zhí)行重命名操作，

root@zynqmp:~# ls -l /boot
total 53172
-rw-------    1 root     root         31428 Jan 26 16:11 0000000001
-rw-r--r--    1 root     root      14283264 Jan 26 12:06 Image
-rwxr-xr-x    1 root     root      19311212 Jan  1  1970 MWM178_V1_U6_V1.bit
-rw-r--r--    1 root     root       1118392 Jan 26 06:47 boot.bin
-rw-r--r--    1 root     root      19634147 Jan 26 00:56 rootfs.ext4.gz.uboot
-rw-r--r--    1 root     root         29091 Jan 26 06:47 system.dtb

上傳使用post方法，后端接收到的字符串為如下格式，可以看到文件名在file_name字段中，可利用環(huán)境變量REQUEST_URI提取出來即可，

------WebKitFormBoundarygKAThjQRpvOwowzR
Content-Disposition: form-data; name="file_name"

11.PNG
------WebKitFormBoundarygKAThjQRpvOwowzR
Content-Disposition: form-data; name="file_content_type"

image/png
------WebKitFormBoundarygKAThjQRpvOwowzR
Content-Disposition: form-data; name="file_path"

/boot/0023791667
------WebKitFormBoundarygKAThjQRpvOwowzR
Content-Disposition: form-data; name="file_md5"

0276e88e6161ac806d46ee0afb45976e
------WebKitFormBoundarygKAThjQRpvOwowzR
Content-Disposition: form-data; name="file_size"

17734
------WebKitFormBoundarygKAThjQRpvOwowzR
Content-Disposition: form-data; name="uploademmc"

uploademmc
------WebKitFormBoundarygKAThjQRpvOwowzR--

FCGI_ROLE=RESPONDER
SCRIPT_FILENAME=./nginx/html/index.cgi
QUERY_STRING=
REQUEST_METHOD=POST
CONTENT_TYPE=multipart/form-data; boundary=----WebKitFormBoundarygKAThjQRpvOwowzR
CONTENT_LENGTH=706
SCRIPT_NAME=/index.cgi
REQUEST_URI=/uploademmc

上傳進度模塊需要前端js協(xié)助，配置文件，前面提到的0.9版本有一個不兼容的更改，如果需要和老版本兼容，需要在location ^~ /progress中添加upload_progress_java_output，

http {
    ...
    upload_progress proxied 5m;
    
    server {
        ...

        location = / {
            fastcgi_pass 127.0.0.1:8088;
            fastcgi_index index.cgi;
            include fastcgi.conf;
        }

        location /download {
            alias   /;
            autoindex on; 
            autoindex_localtime on;
            autoindex_exact_size off;
        } 

        location /upload {  
            upload_pass     /;  
            # upload_cleanup 400 404 499 500-505;  
            upload_store    /boot;  
            upload_store_access user:rw;  
            # upload_limit_rate 128k;  
            client_max_body_size 8g;
            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;  
            upload_pass_form_field "^.*$";  
            track_uploads proxied 30s;
        }

        location ^~ /progress {
            # report uploads tracked in the 'proxied' zone
            report_uploads proxied;
            # upload_progress_java_output;
        }

        location ~ \.js$ {
            root html;
        }

設(shè)置參數(shù)client_max_body_size 8g，否則上傳時會報錯413 Request Entity Too Large，編寫html，

printf("<form id=\"upload\" method=\"POST\" enctype=\"multipart/form-data\" action=\"upload\" οnsubmit=\"openProgressBar(); return true;\"\n");
printf("<p>File Upload:\n");
printf("<input type=\"file\" name=\"file\" value=\"\">\n");
printf("<p>\n");
printf("<input type=\"submit\" name=\"upload\" value=\"upload\">\n");
printf("<p>\n");
printf("</form>\n");
printf("<div>\n");
printf("<div id=\"progress\" style=\"width: 400px; border: 1px solid black\">\n");
printf("<div id=\"progressbar\" style=\"width: 1px; background-color: blue; border: 1px solid white\">&nbsp;</div>\n");
printf("</div>\n");
printf("<div id=\"tp\">(progress)</div>\n");
printf("</div>\n");

添加js文件，

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);
}

測試一下，chrome自己也會統(tǒng)計上傳進度，標(biāo)題欄開始小圓圈刷新，

在這里插入圖片描述