大文件上傳服務器：支持超大文件 HTTP 斷點續傳的實現辦法
最近由於筆者所在的研發集團產品需要，需要支持高性能的大文件 http 上傳，並且要求支持 http 斷點續傳。這裏在簡要歸納一下，方便記憶：
-
服務器端由 C 語言實現，而不是用 java、PHP 這種解釋型語言來實現；
-
服務器端即時寫入硬盤，因此無需再次調用 move_uploaded_file、InputStreamReader 這種需要緩存的技術來避免服務器內存佔用與瀏覽器請求超時；
-
支持 HTML5 與 IFRAME（針對老瀏覽器），並且支持獲取文件上傳進度。
爲了更好的適應當前的移動互聯網，要求對上傳服務支持斷點續傳，斷線重連。因爲移動互聯網並不非常穩定；再者，上傳一個大文件發生異常掉線的可能性非常大，爲了避免重新上傳，支持斷點續傳就變得非常必要了。
支持斷點續傳的思路是：
客戶端（通常是瀏覽器）向服務器端上傳某個文件，並不斷記錄上傳的進度，如果一旦掉線或發生其它異常，客戶端可以向服務器查詢某個文件已經上傳的狀態，從上次上傳的文件位置接着上傳。
網上也有大師採用分片文件上傳方式來實現大文件上傳，方法是將文件切成小片，例如 4MB 一個片段，服務器端每次接收一小片文件保存成一個臨時文件，等待所有片段傳輸完畢後，再執行合併。筆者認爲，如果原始文件足夠小，這種方式是可以的，但一旦文件有幾百兆或者幾個 GB 或者幾十個 GB，則合併文件的時間會非常長，常常導致瀏覽器響應超時或服務器阻塞。
如果自己實現獨立客戶端（或瀏覽器的 ActiveX 插件）來上傳文件，則支持斷點續傳將是一件非常簡單的事情，只需在客戶端記錄文件上傳狀態。而支持瀏覽器斷點續傳（無需安裝第三方插件）一般來說是要比自己做獨立客戶端上傳難度大一些，但也不難。我的實現思路如下：
一、瀏覽器在上傳某個文件時候，先給這個文件生成一個 HASH 值，必須在瀏覽器端生成這個 HASH 值。
不能單循地依據文件名來查詢文件上傳記錄，文件名的重複性很大，文件名 + 文件尺寸組成的值重複性縮小，如果再加上文件修改時間，則重複性進一步縮小，如果再加上一個瀏覽器的 ID 可以進一步縮小重複性衝突。最好的 HASH 值的計算方法是用文件的內容進行 MD5 計算，但計算量極大（其實也沒有必要這麼做），過多的耗時會影響上傳的體驗。
基於上述理由，我的 HASH 值計算思路如下：
-
首先給瀏覽器賦予一個 ID，這個 ID 保存在 Cookie 裏；
-
瀏覽器的 ID+ 文件的修改時間 + 文件名 + 文件尺寸 的結果進行 MD5 來計算一個文件的 HASH 值；
-
瀏覽器的 ID 是系統在瀏覽器訪問文件上傳站點時自動給瀏覽器授予的。
1//簡單的Cookie幫助函數
2function setCookie(cname,cvalue,exdays)
3{
4 var d = new Date();
5 d.setTime(d.getTime()+(exdays*24*60*60*1000));
6 var expires = "expires="+d.toGMTString();
7 document.cookie = cname + "=" + cvalue + "; " + expires;
8}
9
10
11function getCookie(cname)
12{
13 var name = cname + "=";
14 var ca = document.cookie.split(';');
15 for(var i=0; i<ca.length; i++)
16 {
17 var c = ca[i].trim();
18 if (c.indexOf(name)==0) return c.substring(name.length,c.length);
19 }
20 return "";
21}
22//
23//簡單的文件HASH值計算，如果您不是十分考究，應該可以用於產品。
24//由於計算文件HASH值用到了多種數據，因此在HYFileUploader系統範圍內發生HASH衝突的可能性應該非常小，應該可以放心使用。
25//獲取文件的ID可以用任何算法來實現，只要保證做到同一文件的ID是相同的即可，獲取的ID長度不要超過32字節
26//
27function getFileId (file)
28{
29 //給瀏覽器授予一個唯一的ID用於區分不同的瀏覽器實例（不同機器或者相同機器不同廠家的瀏覽器）
30 var clientid = getCookie("HUAYIUPLOAD");
31 if (clientid == "") {
32 //用一個隨機值來做瀏覽器的ID，將作爲文件HASH值的一部分
33 var rand = parseInt(Math.random() * 1000);
34 var t = (new Date()).getTime();
35 clientid =rand+'T'+t;
36
37 setCookie("HUAYIUPLOAD",clientid,365);
38 }
39
40 var info = clientid;
41 if (file.lastModified)
42 info += file.lastModified;
43 if (file.name)
44 info += file.name;
45 if (file.size)
46 info += file.size;
47 //https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js
48 var fileid = md5(info);
49 return fileid;
50}
51
52
筆者認爲：不必通過讀取文件的內容來計算 HASH 值，這樣會非常慢的。如果確實需要實現 HTTP 秒傳，可能得這麼做，這樣如果不同的人上傳的文件內容一致，就可避免重複上傳，直接返回結果即可。
之所以給瀏覽器賦予一個 ID，這樣可以進一步避免別的計算機的同名同尺寸文件的 HASH 值衝突。
二、查詢文件的 HASH 值
在文件上傳支持，先通過文件的 HASH 值從上傳服務器查詢文件的上傳進度信息，然後從上傳進度位置開始上傳，代碼如下：
1var fileObj = currentfile;
2var fileid = getFileId(fileObj);
3var t = (new Date()).getTime();
4//通過以下URL獲取文件的斷點續傳信息，必須的參數爲fileid，後面追加t參數是避免瀏覽器緩存
5var url = resume_info_url + '?fileid='+fileid + '&t='+t;
6
7var ajax = new XMLHttpRequest();
8
9ajax.onreadystatechange = function () {
10 if(this.readyState == 4){
11 if (this.status == 200){
12 var response = this.responseText;
13
14 var result = JSON.parse(response);
15 if (!result) {
16 alert('服務器返回的數據不正確，可能是不兼容的服務器');
17 return;
18 }
19 //斷點續傳信息返回的文件對象包含已經上傳的尺寸
20 var uploadedBytes = result.file && result.file.size;
21 if (!result.file.finished && uploadedBytes < fileObj.size) {
22 upload_file(fileObj,uploadedBytes,fileid);
23 }
24 else {
25 //文件已經上傳完成了，就不要再上傳了，直接返回結果就可以了
26 showUploadedFile(result.file);
27 //模擬進度完成
28 //var progressBar = document.getElementById('progressbar');
29 //progressBar.value = 100;
30 }
31
32 }else {
33 alert('獲取文件斷點續傳信息失敗');
34 }
35 }
36}
37
38ajax.open('get',url,true);
39ajax.send(null);
40
41
以上是通過 jQuery-file-upload 組件的實現，通過原始 Javascript 的實現代碼請參見 demos 目錄的 h4resume.html 樣本代碼。
三、執行上傳
在查詢完文件的斷點續傳信息後，如果文件確實以前已經上傳，服務器將返回已經上傳過的文件尺寸，我們接着從已經上傳的文件尺寸位置開始上傳數據即可。
html5 的 File 對象的 slice 可以用於從文件切取片段來上傳。
定義和用法
slice() 方法可提取字文件的某個部分，並以新的字符串返回被提取的部分。
語法
File.slice(start,end)
參數 描述
start 要抽取的片斷的起始下標。如果是負數，則該參數規定的是從字符串的尾部開始算起的位置。也就是說，-1 指字符串的最後一個字符，-2 指倒數第二個字符，以此類推。
end 緊接着要抽取的片段的結尾的下標。若未指定此參數，則要提取的子串包括 start 到原字符串結尾的字符串。
如果該參數是負數，那麼它規定的是從字符串的尾部開始算起的位置。
實現分片文件上傳的代碼如下：
1/*
2文件上傳處理代碼
3fileObj : html5 File 對象
4start_offset: 上傳的數據相對於文件頭的起始位置
5fileid: 文件的ID，這個是上面的getFileId 函數獲取的，
6*/
7function upload_file(fileObj,start_offset,fileid)
8{
9 var xhr = new XMLHttpRequest();
10 var formData = new FormData();
11
12 var blobfile;
13
14 if(start_offset >= fileObj.size){
15 return false;
16 }
17
18 var bitrateDiv = document.getElementById("bitrate");
19 var finishDiv = document.getElementById("finish");
20 var progressBar = document.getElementById('progressbar');
21 var progressDiv = document.getElementById('percent-label');
22
23 var oldTimestamp = 0;
24 var oldLoadsize = 0;
25 var totalFilesize = fileObj.size;
26 if (totalFilesize == 0) return;
27
28 var uploadProgress = function (evt) {
29 if (evt.lengthComputable) {
30 var uploadedSize = evt.loaded + start_offset;
31 var percentComplete = Math.round(uploadedSize * 100 / totalFilesize);
32
33 var timestamp = (new Date()).valueOf();
34 var isFinish = evt.loaded == evt.total;
35
36 if (timestamp > oldTimestamp || isFinish) {
37 var duration = timestamp - oldTimestamp;
38 if (duration > 500 || isFinish) {
39 var size = evt.loaded - oldLoadsize;
40
41 var bitrate = (size * 8 / duration /1024) * 1000; //kbps
42 if (bitrate > 1000)
43 bitrate = Math.round(bitrate / 1000) + 'Mbps';
44 else
45 bitrate = Math.round(bitrate) + 'Kbps';
46
47 var finish = evt.loaded + start_offset;
48
49 if (finish > 1048576)
50 finish = (Math.round(finish / (1048576/100)) / 100).toString() + 'MB';
51 else
52 finish = (Math.round(finish / (1024/100) ) / 100).toString() + 'KB';
53
54 progressBar.value = percentComplete;
55 progressDiv.innerHTML = percentComplete.toString() + '%';
56 bitrateDiv.innerHTML = bitrate;
57 finishDiv.innerHTML = finish;
58
59 oldTimestamp = timestamp;
60 oldLoadsize = evt.loaded;
61 }
62 }
63 }
64 else {
65 progressDiv.innerHTML = 'N/A';
66 }
67 }
68
69 xhr.onreadystatechange = function(){
70 if ( xhr.readyState == 4 && xhr.status == 200 ) {
71 console.log( xhr.responseText );
72
73 }
74 else if (xhr.status == 400) {
75
76 }
77 };
78
79 var uploadComplete = function (evt) {
80 progressDiv.innerHTML = '100%';
81
82 var result = JSON.parse(evt.target.responseText);
83 if (result.result == 'success') {
84 showUploadedFile(result.files[0]);
85 }
86 else {
87 alert(result.msg);
88 }
89 }
90
91 var uploadFailed = function (evt) {
92 alert("上傳文件失敗！");
93 }
94
95 var uploadCanceled = function (evt) {
96 alert("上傳被取消或者瀏覽器斷開了連接！");
97 }
98
99 //設置超時時間,由於是上傳大文件，因此千萬不要設置超時
100 //xhr.timeout = 20000;
101 //xhr.ontimeout = function(event){
102 // alert('文件上傳時間太長，服務器在規定的時間內沒有響應！');
103 //}
104
105 xhr.overrideMimeType("application/octet-stream");
106
107 var filesize = fileObj.size;
108 var blob = fileObj.slice(start_offset,filesize);
109 var fileOfBlob = new File([blob], fileObj.name);
110 //附加的文件數據應該放在請求的前面
111 formData.append('filename', fileObj.name);
112 //必須將fileid信息傳送給服務器，服務器只有在獲得了fileid信息後纔對文件做斷點續傳處理
113 formData.append('fileid', fileid);
114 //請將文件數據放在最後的域
115 //formData.append("file",blob, fileObj.name);
116 formData.append('file', fileOfBlob);
117
118 xhr.upload.addEventListener("progress", uploadProgress, false);
119
120 xhr.addEventListener("load", uploadComplete, false);
121 xhr.addEventListener("error", uploadFailed, false);
122 xhr.addEventListener("abort", uploadCanceled, false);
123 xhr.open('POST', upload_file_url);
124 //
125 xhr.send(formData);
126}
127
128
爲了驗證文件斷點續傳，筆者做了一個簡單的界面，用於顯示文件上傳的過程中的狀態信息，界面如下：
通過 HTML 可以計算文件上傳的進度，文件已經上傳的尺寸，文件上傳的位率等信息，如果在上傳過程中出現任何異常，則重新上傳即可，已經上傳的部分將不需要重新上傳。
爲了驗證 HTML5 斷點續傳，可以通過 github 來下載 這個文件上傳服務器來進行測試。
https://github.com/wenshui2008/UploadServer
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/9pSJIsRQ5YGjiDteUgUEeg