HTML5 大文件斷點續傳完整思路整理

需求：

支持大文件批量上傳（20G）和下載，同時須要保證上傳期間用戶電腦不出現卡死等體驗；

內網百兆網絡上傳速度爲12MB/S

服務器內存佔用低

支持文件夾上傳，文件夾中的文件數量達到1萬個以上，且包含層級結構。

支持PC端全平臺操做系統，Windows,Linux,Mac

支持文件和文件夾的批量下載，斷點續傳。刷新頁面後繼續傳輸。關閉瀏覽器後保留進度信息。

支持文件夾批量上傳下載，服務器端保留文件夾層級結構，服務器端文件夾層級結構與本地相同。

支持斷點續傳，關閉瀏覽器或刷新瀏覽器後仍然可以保留進度。

支持文件夾結構管理，支持新建文件夾，支持文件夾目錄導航

交互友好，可以及時反饋上傳的進度；

服務端的安全性，不因上傳文件功能致使JVM內存溢出影響其餘功能使用；

最大限度利用網絡上行帶寬，提升上傳速度；

 

分析：

對於大文件的處理，不管是用戶端仍是服務端，若是一次性進行讀取發送、接收都是不可取，很容易致使內存問題。因此對於大文件上傳，採用切塊分段上傳

從上傳的效率來看，利用多線程併發上傳可以達到最大效率。

 

解決方案：

文件上傳頁面的前端能夠選擇使用一些比較好用的上傳組件，例如百度的開源組件WebUploader，澤優軟件的up6，這些組件基本能知足文件上傳的一些平常所需功能，如異步上傳文件，文件夾，拖拽式上傳，黏貼上傳，上傳進度監控，文件縮略圖，甚至是大文件斷點續傳，大文件秒傳。

 

第一步：

數據庫配置

項目中數據庫配置是在DBConfig.java文件中，只須要在此文件中進行數據庫配置便可。

在DBConfig.java文件提供了mysql,SQL Server,Oracle的配置信息，只須要填寫對應的數據庫配置便可。若是使用的MYSQL就填MySQL數據庫的鏈接信息，若是使用的是Oracle就填寫Oracle數據庫的鏈接信息

upload:{uploadLimit:5,fileSizeLimit:31744,removeTimeout:0.8}

以上三個變量表明的含義是：

uploadLimit：表示上傳文件個數的限制，5表示文件上傳個數限制是5個

fileSizeLimit：表示上傳文件大小的限制，31744單位是KB，也就是表示31M

removeTimeout：表示移除文件的時間限制

繼續查找使用到這些變量的地方，看到了文件大小超出限制等
文件大小配置，若是須要限制用戶選擇的文件大小，則在up6.js中對FileSizeLimit進行配置便可，單位是字節。

瞭解了BJUI前端框架對於上傳大文件的限制，能夠這樣使用，增大文件上傳大小和數量，能夠按照以下進行修改，咱們在bjui-all.js文件看到uploadLimit屬性和fileSizeLimit屬性的限制，咱們在jsp文件中能夠這樣進行替換，這裏使用的是覆蓋原則，從新定義uploadLimit屬性和fileSizeLimit屬性，覆蓋bjui-all.js文件的默認值設置。

bjui-all.js文件的uploadLimit屬性和fileSizeLimit屬性對應到jsp文件中的屬性就應該這樣寫，data-upload-limit屬性和data-file-size-limit屬性，只須要在後面改寫爲data-upload-limit=「800」和data-file-size-limit=「5131264」便可，必定要注意這裏的單位是KB，以上數字表示501M。

 

關於Uploadify控件屬性能夠參考這篇文章也能夠直接看官網文檔：

http://www.javashuo.com/article/p-cnelvxdt-hu.html

屬性名稱	默認值	說明
auto	true	設置爲true當選擇文件後就直接上傳了，爲false須要點擊上傳按鈕才上傳 。
buttonClass	」	按鈕樣式
buttonCursor	‘hand’	鼠標指針懸停在按鈕上的樣子
buttonImage	null	瀏覽按鈕的圖片的路徑 。
buttonText	‘SELECT FILES’	瀏覽按鈕的文本。
checkExisting	false	文件上傳重複性檢查程序，檢查即將上傳的文件在服務器端是否已存在，存在返回1，不存在返回0
debug	false	若是設置爲true則表示啓用SWFUpload的調試模式
fileObjName	‘Filedata’	文件上傳對象的名稱，若是命名爲’the_files’，PHP程序能夠用$_FILES['the_files']來處理上傳的文件對象。
fileSizeLimit	0	上傳文件的大小限制 ，若是爲整數型則表示以KB爲單位的大小，若是是字符串，則可使用(B, KB, MB, or GB)爲單位，好比’2MB’； 若是設置爲0則表示無限制
fileTypeDesc	‘All Files’	這個屬性值必須設置fileTypeExts屬性後纔有效，用來設置選擇文件對話框中的提示文本，如設置fileTypeDesc爲「請選擇rar   doc pdf文件」
fileTypeExts	‘*.*’	設置能夠選擇的文件的類型，格式如：’*.doc;*.pdf;*.rar’ 。
formData		JSON格式上傳每一個文件的同時提交到服務器的額外數據，可在’onUploadStart’事件中使用’settings’方法動態設置。
height	30	設置瀏覽按鈕的高度 ，默認值
itemTemplate	false	用於設置上傳隊列的HTML模版，可使用如下標籤：   instanceID – Uploadify實例的ID   fileID – 列隊中此文件的ID,或者理解爲此任務的ID   fileName – 文件的名稱   fileSize – 當前上傳文件的大小   插入模版標籤時使用格式如：${fileName}
method	Post	提交方式Post或Get
multi	true	設置爲true時能夠上傳多個文件。
overrideEvents		設置哪些事件能夠被重寫，JSON格式，如：’overrideEvents’ : ['onUploadProgress']
preventCaching	true	若是爲true，則每次上傳文件時自動加上一串隨機字符串參數，防止URL緩存影響上傳結果
progressData	‘percentage’	設置上傳進度顯示方式，percentage顯示上傳百分比，speed顯示上傳速度
queueID	false	設置上傳隊列容器DOM元素的ID，若是爲false則自動生成一個隊列容器。
queueSizeLimit	999	隊列最多顯示的任務數量，若是選擇的文件數量超出此限制，將會出發onSelectError事件。   注意此項並不是最大文件上傳數量，若是要限制最大上傳文件數量，應設置uploadLimit。
removeCompleted	true	是否自動將已完成任務從隊列中刪除，若是設置爲false則會一直保留此任務顯示。
removeTimeout	3	若是設置了任務完成後自動從隊列中移除，則能夠規定從完成到被移除的時間間隔。
requeueErrors	false	若是設置爲true，則單個任務上傳失敗後將返回錯誤，並從新加入任務隊列上傳。
successTimeout	30	文件上傳成功後服務端應返回成功標誌，此項設置返回結果的超時時間
swf	‘uploadify.swf’	uploadify.swf 文件的相對路徑。
uploader	uploadify.php	後臺處理程序的相對路徑。
uploadLimit	999	最大上傳文件數量，若是達到或超出此限制將會觸發onUploadError事件。
width	120	設置文件瀏覽按鈕的寬度。

第二步：

後端修改
項目採用的最簡單的jsp文件，修改起來很是簡單。如今提供的DEMO基本上不須要進行其它的修改。只須要對地址進行簡單配置就能夠當即使用。


項目的依賴包所有都放在項目的lib目錄中，能夠直接導入。相關的IDE都可以自動導入，也是很是的簡單。

因爲項目後端使用的Spring Boot，自己也就是使用的Spring MVC文件上傳部分，Spring MVC使用的是已經對Servlet文件上傳封裝了的MultipartResolver接口及其相關實現類和一些相關的類，具體的能夠看Spring MVC文件上傳源碼部分，認爲Spring源碼仍是須要讀的，咱們只要在Spring Boot啓動類中注入這個Bean，或者自行寫一個WebConfig配置類，注入一些Web相關的Bean便可，這樣Spring Boot啓動就會加載配置類，也須要本身寫攔截器和全局AOP切面，去捕捉文件上傳大小超過限制的異常處理等

基於Spring MVC文件上傳組件MultipartResolver接口（核心），使用其中的CommonsMultipartResolver（實現了MultipartResolver接口）這個實現類，CommonsMultipartResolver中的maxUploadSize屬性是它繼承的抽象父類CommonsFileUploadSupport，這個抽象類其中的一個屬性是FileUpload類，而這個類又繼承自FileUploadBase這個抽象類，其中它的private long sizeMax = -1;就是maxUploadSize屬性的最終設置地方。-1表示文件上傳大小沒有限制，可是咱們通常都會設置一個限制值，這裏設置的是210763776，這個值的單位是字節，咱們將它設置爲525336576字節，也就是501M的大小限制。

 

修改完以上前端和後端，提交修改的代碼到git上便可。

 

第三步：

Nginx配置

進入到項目部署發佈所在的Linux下，進入nginx服務器所安裝的目錄，

進入到nginx服務器所安裝的目錄

進入到nginx服務器目錄下的conf目錄

查看nginx.conf配置文件內容中的client_max_body_size配置的大小，這裏設置的是300M。

使用vi或者vim打開nginx.conf配置文件，修改client_max_body_size的大小爲501M，保存便可

進入到nginx服務器下的sbin目錄下，咱們使用./nginx -t查看配置文件是否成功使用，而後使用./nginx -s reload重啓Nginx服務器便可。

 

第四步：

Tomcat配置

因爲項目使用的是Spring Cloud，天然使用Spring Boot，咱們這個項目仍是使用外置的Tomcat做爲他的服務器，便於咱們對Tomcat服務器進行優化和設置。

進入到項目使用的Tomcat服務器的目錄

進入到指定項目使用的Tomcat服務器的目錄

進入到Tomcat服務器下的conf配置目錄中

看到server.xml配置文件後

先行查看Tomcat服務器的配置，其中兩個屬性對於此次是比較重要的一個是connectionTimeout這個鏈接超時時間設置以及默認的maxPostSize屬性的設置

使用vi或者vim打開server.xml配置文件，修改connectionTimeout的大小爲2000000，這個屬性的單位是毫秒，換算以後大概是半個小時，咱們配置缺省的maxPostSize屬性的值，默認狀況下它的值是2097152，它的單位是字節，也就是2M的大小，修改完保存便可

 

修改完服務器以後，使用發佈工具從新從git上拉取最新的代碼和部署發佈，從新啓動腳本便可完成修改，再次嘗試大文件上傳，功能基本實現。

 

以上須要注意的是maxPostSize屬性在各個Tomcat版本中的不一樣，能夠參考我寫的這篇文章：http://blog.ncmem.com/wordpress/2019/09/18/%E4%B8%8A%E4%BC%A0%E5%A4%A7%E6%96%87%E4%BB%B6%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/