資訊專欄INFORMATION COLUMN
摘要：話前上傳大文件上傳的教程網(wǎng)上很多但是大部分沒給出一個比較完整的出來這個博客給出的是前后端一套完整的解決方案其中前端沒有使用第三方上傳庫希望能幫到有同樣需求的朋友們大文件分片上傳的好處在這里就不用多說了之前不管是上傳單文件還是分片文件上傳都是
話前
上傳大文件上傳的教程網(wǎng)上很多, 但是大部分沒給出一個比較完整的出來, 這個博客給出的是前后端一套完整的解決方案, 其中前端沒有使用第三方上傳庫, 希望能幫到有同樣需求的朋友們.
大文件分片上傳的好處在這里就不用多說了, 之前不管是上傳單文件還是分片文件上傳都是依靠Flash來實現(xiàn), 現(xiàn)在H5能原生支持, 而且性能要比Flash高很多, 所以正好公司的一個需求就是要分片上傳, 借機分享給大家
分片上傳的思路如下:第一步:先對文件進行MD5的加密, 這樣有兩個好處, 即可以對文件進行唯一的標識, 為秒傳做準備, 也可以為后臺進行文件完整性的校驗進行比對
第二步:拿到MD5值以后, 要查詢一下, 這個文件是否已經(jīng)上傳過了, 如果上傳過了, 就不用再次重復(fù)上傳, 也就是能夠秒傳, 網(wǎng)盤里的秒傳, 原理也是一樣的
第三步:對文件進行切片, 假如文件是500M, 一個切片大小我們定義為50M, 那么整個文件就為分為100次上傳
第四步:向后臺請求一個接口, 接口里面的數(shù)據(jù)是該文件已經(jīng)上傳過的文件塊, 為什么要有這個請求呢? 我們經(jīng)常用網(wǎng)盤, 網(wǎng)盤里面有續(xù)傳的功能, 一個文件傳到一半, 由于各種原因, 不想再傳了, 那么再次上傳的時候, 服務(wù)器應(yīng)該保留我之前上傳過的文件塊, 跳過這些已經(jīng)上傳過的塊, 再次上傳其他文件塊, 當然續(xù)傳方案有很多, 目前來看, 多帶帶發(fā)一次請求, 這樣效率最高
第五步:開始對未上傳過的塊進行POST上傳
第六步:當上傳成功后, 通知服務(wù)器進行文件的合并, 至此, 上傳完成!
為了直觀起見, 我畫了一個流程圖 最終前端的效果圖 后端的最終文件目錄結(jié)構(gòu) 下面我們說下主要的代碼GIF圖里的校驗文件就是對文件進行MD5+拿這個MD5值, 看下文件是否已經(jīng)上傳
對文件的MD5小文件還好, 大文件的話會比較慢, 經(jīng)我測試, 4G的文件, MD5的時間大約在2分鐘
對文件進行MD5, 我們使用的是spark-md5, 因為這步是瀏覽器來做, 所以需要引入這個js
因為MD5的大文件時間比較長, 所以要和GIF圖一樣, 做成帶進度的, 這樣就需要把文件進行分片的MD5, spark也支持這種方式, 最終的MD5值為spark.end()
和服務(wù)器校驗文件的ajax請求, 需要傳遞文件名稱和文件的MD5值
Node端會處理兩件事件, 1.看文件是否存在 2.文件不存在, 返回已上傳文件塊的list, 文件沒上傳過, 則list為空
下面我們會對文件進行切片處理(File的API提供slice操作), 序號0-n, (服務(wù)器存儲的文件形式也是MD5作為文件夾名, 0-n為文件名, 如上面那張服務(wù)器結(jié)果所示), 然后循環(huán)每個分片, 和上面的服務(wù)器返回的List做比對, 未在List上的文件進行上傳
前端代碼:
node端代碼
最后一步, 當所有文件都上傳完成, 告知Node端合并文件
前端代碼
Node端代碼
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/82282.html
摘要：開源庫隨著支持功能的增多，音頻轉(zhuǎn)碼處理效率漸漸的跟不上需求了，近期抽時間對音頻轉(zhuǎn)碼部分進行了升級優(yōu)化，以支持更多實用的功能。基于以上兩點問題，似乎只有多線程能夠解決。 Recorder H5 GitHub開源庫隨著支持功能的增多，音頻轉(zhuǎn)碼處理效率漸漸的跟不上需求了，近期抽時間對音頻轉(zhuǎn)碼部分進行了升級優(yōu)化，以支持更多實用的功能。另外IOS的Hybrid App也完成了移植，Android...
摘要：所以，該文適合于全棧工程師，至少是想成為還有，為什么需要分片，不分片能實現(xiàn)斷點續(xù)傳嗎分片是為了充分利用網(wǎng)絡(luò)帶寬，加快上傳速度不分片也是能夠?qū)崿F(xiàn)斷點續(xù)傳的。詳細參考文件上傳組件深度剖析分片上傳與斷點續(xù)傳之間沒有很直接的關(guān)系好了，進入正題。 上傳文件，基本上是每一個網(wǎng)站應(yīng)用都會具備的一個功能。對于一個網(wǎng)絡(luò)存儲應(yīng)用，對于上傳功能要求更是迫切。 如今市面上成熟上傳插件，如WebUpload...
摘要：基于的大文件分片上傳我們在做文件上傳的時候，如果文件過大，可能會導致請求超時的情況。所以，在遇到需要對大文件進行上傳的時候，就需要對文件進行分片上傳的操作。所以把文件名稱加上。后續(xù)延伸斷點續(xù)傳多文件多批次上傳 基于Node.js的大文件分片上傳 我們在做文件上傳的時候，如果文件過大，可能會導致請求超時的情況。所以，在遇到需要對大文件進行上傳的時候，就需要對文件進行分片上傳的操作。同時如...
閱讀 3729·2021-11-24 09:39
閱讀 1358·2021-09-30 09:48
閱讀 3366·2021-09-09 11:51
閱讀 2976·2021-09-08 10:41
閱讀 1391·2019-08-30 14:06
閱讀 2869·2019-08-30 14:01
閱讀 928·2019-08-29 17:11
閱讀 3232·2019-08-29 15:37
