一、安裝nginx容器
為了讓nginx支持文件上傳,需要下載并運行帶有nginx-upload-module模塊的容器:
sudo?podman?pull?docker.io/dimka2014/nginx-upload-with-progress-modules:latest sudo?podman?-d?--name?nginx?-p?83:80?docker.io/dimka2014/nginx-upload-with-progress-modules
該容器同時帶有nginx-upload-module模塊和nginx-upload-progress-module模塊。
注意該容器是Alpine Linux ,沒有bash,有些命令與其它發行版本的Linux不一樣。
使用下面的命令進入容器:
sudo?podman?exec?-it?nginx?/bin/sh
作為文件服務器, 需要顯示本地時間,默認不是本地時間。通過下面一系列命令設置為本地時間:
apk?update apk?add?tzdata echo?"Asia/Shanghai"?>?/etc/timezone rm?-rf?/etc/localtime cp?/usr/share/zoneinfo/Asia/Shanghai?/etc/localtime apk?del?tzdata
創建文件服務器的根目錄:
mkdir?-p?/nginx/share
二、配置nginx
配置文件的路徑為/etc/nginx/conf.d/default.conf,作為
server?{ ????…… ????charset?utf-8;?#?設置字符編碼,避免中文亂碼 ????location?/?{ ????????????root???/nginx/share;?#?根目錄 ????????????autoindex???on;??#?開啟索引功能 ????????????autoindex_exact_size?off;?#?關閉計算文件確切大?。▎挝籦ytes),只顯示大概大?。▎挝籯b、mb、gb) ????????????autoindex_localtime?on;?#?顯示本地時間 ????????} }
此時我們的文件服務就配置好了,需要使用下面的命令讓配置生效:
nginx?-s?reload
三、支持文件上傳
1. 配置nginx
上面的配置已經完成文件服務器的配置了,但是不能上傳文件,想要上傳文件,還需要做如下配置:
server?{ ????…… ????charset?utf-8;?#?設置字符編碼,避免中文亂碼 ????client_max_body_size?32m;? ????upload_limit_rate?1M;?#?限制上傳速度最大1M ???? ????#?設置upload.html頁面路由 ????location?=?/upload.html?{???????????????????????????????????????????????????????? ????????????root?/nginx;??#?upload.html所在路徑??????????????????????????????????????????????????????? ????} ????location?/upload?{ ????????????#?限制上傳文件最大30MB ????????????upload_max_file_size?30m; ????????????#?設置后端處理交由@rename處理。由于nginx-upload-module模塊在存儲時并不是按上傳的文件名存儲的,所以需要自行改名。 ????????????upload_pass?@rename; ????????????#?指定上傳文件存放目錄,1表示按1位散列,將上傳文件隨機存到指定目錄下的0、1、2、...、8、9目錄中(這些目錄要手動建立) ????????????upload_store?/tmp/nginx?1; ????????????#?上傳文件的訪問權限,user:r表示用戶只讀,w表示可寫 ????????????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"; ????????????upload_pass_form_field?"^submit$|^description$"; ????????????#?設置上傳文件的md5值和文件大小 ????????????upload_aggregate_form_field?"${upload_field_name}_md5"?"$upload_file_md5"; ????????????upload_aggregate_form_field?"${upload_field_name}_size"?"$upload_file_size"; ????????????#?如果出現下列錯誤碼則刪除上傳的文件 ????????????upload_cleanup?400?404?499?500-505; ?????} ????location?@rename?{ ????????????#?后端處理 ????????????proxy_pass?http://localhost:81; ????} }
上面的配置中,臨時存儲時是按1位散列來存儲的,需要在上傳目錄下手動創建0~9幾個目錄。
?mkdir?-p?/tmp/nginx ?cd?/tmp/nginx ?mkdir?1?2?3?4?5?6?7?8?9?0 ?chown?nginx:root?.?-R
2. 添加upload.html
nbsp;html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>上傳</title><meta>
3. 添加后面的處理服務
需要先安裝python及所需的庫
apk?add?python3 pip3?install?bottle pip3?install?shutilwhich
python服務源碼:
#!/usr/bin/python3 #?-*-?coding:?utf-8?-*- from?bottle?import?* import?shutil @post("/upload") def?postExample(): ????try: ????????dt?=?request.forms.dict ????????filenames?=?dt.get('file.name') ????????tmp_path?=?dt.get("file.tmp_path") ????????filepaths?=?dt.get("file.path") ????????count?=?filenames.__len__() ????????dir?=?os.path.abspath(filepaths[0]) ????????for?i?in?range(count): ????????????print("rename?%s?to?%s"?%?(tmp_path[i],??os.path.join(dir,?filenames[i]))) ????????????target?=?os.path.join(dir,?filenames[i]) ????????????shutil.move(tmp_path[i],?target) ????????????shutil.chown(target,?"nginx",?"root")?#?由于shutil.move不會保持用戶歸屬,所以需要顯示修改,否則訪問時會報403無訪問權限 ????except?Exception?as?e: ????????print("Exception:%s"?%?e) ????????redirect("50x.html")?#?如果是在容器中部署的nginx且映射了不同的端口,需要指定IP,端口 ????redirect('/')?#?如果是在容器中部署的nginx且映射了不同的端口,需要指定IP,端口 run(host='localhost',?port=81)
四、獲取上傳進度
1.修改配置
#?開辟一個空間proxied來存儲跟蹤上傳的信息1MB upload_progress?proxied?1m; server?{ ????…… ????location?^~?/progress?{ ????????#?報告上傳的信息 ????????report_uploads?proxied; ????} ????location?/upload?{ ????????... ????????#?上傳完成后,仍然保存上傳信息5s ????????track_uploads?proxied?5s; ????} }
2. 修改上傳頁面
????
???
<script> 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>