vue之大文件分段上傳、斷點續傳


需求:

支持大文件批量上傳(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模版,可以使用以下標簽:
  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/



免責聲明!

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



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