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