需求:
支持大文件批量上傳(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控件屬性可以參考這篇文章也可以直接看官網文檔:
https://www.cnblogs.com/yangy608/p/3915349.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模版,可以使用以下標簽: |
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事件。 |
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/