居於H5的多文件、大文件、多線程上傳解決方案


文件上傳在web應用中是比較常見的功能,前段時間做了一個多文件、大文件、多線程文件上傳的功能,使用效果還不錯,總結分享下。

一、 功能性需求與非功能性需求

  • 要求操作便利,一次選擇多個文件進行上傳;

  • 支持大文件上傳(1G),同時需要保證上傳期間用戶電腦不出現卡死等體驗;

  • 交互友好,能夠及時反饋上傳的進度;

  • 服務端的安全性,不因上傳文件功能導致JVM內存溢出影響其他功能使用;

  • 最大限度利用網絡上行帶寬,提高上傳速度;

二、 設計分析

  • 對於大文件的處理,無論是用戶端還是服務端,如果一次性進行讀取發送、接收都是不可取,很容易導致內存問題。所以對於大文件上傳,采用切塊分段上傳

  • 從上傳的效率來看,利用多線程並發上傳能夠達到最大效率。

  • 對於大文件切塊、多線程上傳,需要考慮服務端合並文件的時間點;

三、解決方案:

在HTML5之前的標准是無法支持上面的功能,因此我們需要把功能實現居於H5提供的新特性上面:

1. H5新標准對file標簽進行了增強,支持同時選擇多個文件

  1. <input type="file" multiple=true onchange="doSomething(this.files)"/>

  2. 1

注意multiple屬性,設置為true;

onchange:一般是選擇文件確定后的響應事件

this.files:文件對象集合

2. File對象

H5提供的類似java的RandomAccessFile的文件操作對象,其中silce方法允許程序指定文件的起止字節進行讀取。利用這個對象,實現對大文件的切分;

3.

這個對象大家應該很熟悉了,屬於web2.0的標准,我們最常用的ajax請求底層就是居於此對象。本質上是一個線程對象,因此我們通過創建一定數量的對象,實現多線程並行操作;

4. FormData對象

H5新增對象,可以理解為一個key-value的map,通過把文件的二進制流和業務參數封裝到此對象,再交由對象發送到服務端,服務端可以通過普通的request.getParamter方法獲取這些參數;

5. progress標簽

H5新增的標簽,在頁面顯示一個進度條:

value:當前進度條的值

max:最大值

利用這個標簽,結合的回調來反饋目前上傳的進度

四、客戶端代碼示例

  • HTML代碼:

    1. <input type="file" multiple=true onchange="showFileList(this.files)"/>

    2. <input id="uploadBtn" type="button" value="上傳" onclick="doUpload()"/>

    3. 1

    4. 2

  • java腳本:

    1. var quence = new Array();//待上傳的文件隊列,包含切塊的文件

    2. /**

    3. * 用戶選擇文件之后的響應函數,將文件信息展示在頁面,同時對大文件的切塊大小、塊的起止進行計算、入列等

    4. */

    5. function showFileList(files) {

    6. if(!files) {

    7. return;

    8. }

    9. var chunkSize = 5 * 1024 * 1024; //切塊的閥值:5M

    10. $(files).each(function(idx,e){

    11. //展示文件列表,略......

    12. if(e.size > chunkSize) {//文件大於閥值,進行切塊

    13. //切塊發送

    14. var chunks = Math.max(Math.floor(fileSize / chunkSize), 1)+1;//分割塊數

    15. for(var i=0 ; i<chunks; i++) {

    16. var startIdx = i*chunkSize;//塊的起始位置

    17. var endIdx = startIdx+chunkSize;//塊的結束位置

    18. if(endIdx > fileSize) {

    19. endIdx = fileSize;

    20. }

    21. var lastChunk = false;

    22. if(i == (chunks-1)) {

    23. lastChunk = true;

    24. }

    25. //封裝成一個task,入列

    26. var task = {

    27. file:e,

    28. uuid:uuid,//避免文件的重名導致服務端無法定位文件,需要給每個文件生產一個UUID

    29. chunked:true,

    30. startIdx:startIdx,

    31. endIdx:endIdx,

    32. currChunk:i,

    33. totalChunk:chunks

    34. }

    35. quence.push(task);

    36. }

    37. } else {//文件小於閥值

    38. var task = {

    39. file:e,

    40. uuid:uuid,

    41. chunked:false

    42. }

    43. quence.push(task);

    44. }

    45. });

    46. }

    47. /**

    48. * 上傳器,綁定一個對象,處理分配給其的上傳任務

    49. **/

    50. function Uploader(name) {

    51. this.url=""; //服務端處理url

    52. this.req = new ();

    53. this.tasks; //任務隊列

    54. this.taskIdx = 0; //當前處理的tasks的下標

    55. this.name=name;

    56. this.status=0; //狀態,0:初始;1:所有任務成功;2:異常

    57. //上傳 動作

    58. this.upload = function(uploader) {

    59. this.req.responseType = "json";

    60. //注冊load事件(即一次異步請求收到服務端的響應)

    61. this.req.addEventListener("load", function(){

    62. //更新對應的進度條

    63. progressUpdate(this.response.uuid, this.response.fileSize);

    64. //從任務隊列中取一個再次發送

    65. var task = uploader.tasks[uploader.taskIdx];

    66. if(task) {

    67. console.log(uploader.name + ":當前執行的任務編號:" +uploader.taskIdx);

    68. this.open("POST", uploader.url);

    69. this.send(uploader.buildFormData(task));

    70. uploader.taskIdx++;

    71. } else {

    72. console.log("處理完畢");

    73. uploader.status=1;

    74. }

    75. });

    76. //處理第一個

    77. var task = this.tasks[this.taskIdx];

    78. if(task) {

    79. console.log(uploader.name + ":當前執行的任務編號:" +this.taskIdx);

    80. this.req.open("POST", this.url);

    81. this.req.send(this.buildFormData(task));

    82. this.taskIdx++;

    83. } else {

    84. uploader.status=1;

    85. }

    86. }

    87. //提交任務

    88. this.submit = function(tasks) {

    89. this.tasks = tasks;

    90. }

    91. //構造表單數據

    92. this.buildFormData = function(task) {

    93. var file = task.file;

    94. var formData = new FormData();

    95. formData.append("fileName", file.name);

    96. formData.append("fileSize", file.size);

    97. formData.append("uuid", task.uuid);

    98. var chunked = task.chunked;

    99. if(chunked) {//分塊

    100. formData.append("chunked", task.chunked);

    101. formData.append("data", file.slice(task.startIdx, task.endIdx));//截取文件塊

    102. formData.append("currChunk", task.currChunk);

    103. formData.append("totalChunk", task.totalChunk);

    104. } else {

    105. formData.append("data", file);

    106. }

    107. return formData;

    108. }

    109. }

    110. /**

    111. *用戶點擊“上傳”按鈕

    112. */

    113. function doUpload() {

    114. //創建4個Uploader上傳器(4條線程)

    115. var uploader0 = new Uploader("uploader0");

    116. var task0 = new Array();

    117. var uploader1 = new Uploader("uploader1");

    118. var task1 = new Array();

    119. var uploader2 = new Uploader("uploader2");

    120. var task2 = new Array();

    121. var uploader3 = new Uploader("uploader3");

    122. var task3 = new Array();

    123. //將文件列表取模hash,分配給4個上傳器

    124. for(var i=0 ; i<quence.length; i++) {

    125. if(i%4==0) {

    126. task0.push(quence[i]);

    127. } else if(i%4==1) {

    128. task1.push(quence[i]);

    129. } else if(i%4==2) {

    130. task2.push(quence[i]);

    131. } else if(i%4==3) {

    132. task3.push(quence[i]);

    133. }

    134. }

    135. /提交任務,啟動線程上傳

    136. uploader0.submit(task0);

    137. uploader0.upload(uploader0);

    138. uploader1.submit(task1);

    139. uploader1.upload(uploader1);

    140. uploader2.submit(task2);

    141. uploader2.upload(uploader2);

    142. uploader3.submit(task3);

    143. uploader3.upload(uploader3);

    144. //注冊一個定時任務,每2秒監控文件是否都上傳完畢

    145. uploadCompleteMonitor = setInterval("uploadComplete()",2000);

    146. }

五、服務端處理:

服務端處理邏輯相對比較傳統,利用輸入輸出流、NIO等把文件寫到磁盤即可。

這里需要特別考慮的是關於被切塊文件的合並。前端在上傳的時候,文件塊是無序到達服務端,因此我們在每次接收到一個文件塊的時候需要判斷被切塊的文件是否都傳輸完畢並進行合並,思路如下:

回到前端,我們在構造被切塊的文件formData的數據結構:

  1. formData.append("fileName", file.name);

  2. formData.append("fileSize", file.size);

  3. formData.append("uuid", task.uuid);

  4. formData.append("chunked", task.chunked);

  5. formData.append("data", file.slice(task.startIdx, task.endIdx));//截取文件塊

  6. formData.append("currChunk", task.currChunk);

  7. formData.append("totalChunk", task.totalChunk);

fileName:文件的原始名字

fileSize:文件的大小,KB

uuid:文件的uuid

chunked:true,標識是分段上傳的文件塊

data:文件二進制流

currChunk:當前上傳的塊編號

totalChunk:總塊數

服務端以文件的UUID為key,維護一個chunk計數器,每接收到一塊就找到對應的uuid執行計數器+1,同時考慮到並發情況,需采用同步關鍵字,避免出現邏輯錯誤。當計數器等於totalChunk的時候,進行文件合並

前端效果:


 

文件上傳存儲目錄:D:\wamp64\www\up6\db\upload\2019\04\19\920144c756af424ca59136be71cf9209


 

文件上傳完成后,被完整的存放在了目錄中。

DEMO下載地址:https://dwz.cn/fgXtRtnu


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM