隨著互聯(lián)網(wǎng)基礎(chǔ)設(shè)施的改善，尤其是通信基礎(chǔ)設(shè)置的改善，就是我們通俗說的網(wǎng)速的改善，現(xiàn)在越來越多的應(yīng)用場(chǎng)景需要用戶跟應(yīng)用之間傳輸體積更大的文件（如長視頻），記得在10多年前的BBS時(shí)代，那時(shí)候雖然已經(jīng)是用戶創(chuàng)作內(nèi)容的時(shí)代，但是網(wǎng)站會(huì)嚴(yán)格限制用戶的上傳文件大小，一般單文件體積設(shè)置在5MB以下的限制。而現(xiàn)在，越來越多的場(chǎng)景需要用戶自主上傳幾百M(fèi)B的大文件，甚至上GB級(jí)的文件。

采用直傳的方式，會(huì)存在一個(gè)非常嚴(yán)重的問題，那就是如果一旦網(wǎng)絡(luò)波動(dòng)可能就可能造成上傳中斷，中斷后需要重新上傳。而且服務(wù)端可能也可能接接收文件超時(shí)。即便是采用現(xiàn)代的云服務(wù)，按理說服務(wù)端的穩(wěn)定性是非常強(qiáng)悍的，但通過實(shí)踐發(fā)現(xiàn)幾乎在上傳數(shù)百M(fèi)B的時(shí)候都會(huì)出現(xiàn)上傳中斷的問題。

其中最大的問題就是網(wǎng)絡(luò)波動(dòng)影響，在一般普通用戶的網(wǎng)絡(luò)環(huán)境，很難保持幾十分鐘網(wǎng)絡(luò)沒有任何的波動(dòng)，一旦有波動(dòng)，上傳操作就意外終止，需要重新上傳。這種用戶體驗(yàn)簡直太糟糕，所以對(duì)于大文件我們一般需要支持?jǐn)帱c(diǎn)續(xù)傳。

在基于云服務(wù)開發(fā)背景下，主流的云服務(wù)廠商已經(jīng)把這些相對(duì)底層的服務(wù)幫我們已經(jīng)做得相對(duì)完善了。比如微構(gòu)網(wǎng)絡(luò)在關(guān)于大文件存儲(chǔ)經(jīng)常使用的七牛云，就在這方面做得相對(duì)來說是非常易用的。支持分片上傳接口，接口支持?jǐn)帱c(diǎn)續(xù)傳，而且官方給了SDK，基于SDK一行代碼即可跑通需求所需要的基本流程。使用方法很簡單：

1、首先引入SDK。

引入SDK有三種常見的方式，直接引入靜態(tài)文件和使用 NPM 安裝、以及通過源碼編譯。

a、直接引入靜態(tài)文件就是傳統(tǒng)的做法，直接把js文件用script標(biāo)簽即可創(chuàng)建全局對(duì)象qiniu。

b、使用npm安裝：

npm install qiniu-js
const qiniu = require('qiniu-js')

c、通過源碼編譯：git clone git@github.com:qiniu/js-sdk.git，進(jìn)入項(xiàng)目根目錄執(zhí)行 npm install ，執(zhí)行 npm run build，即可在dist 目錄生成 qiniu.min.js。

2、在前端上傳邏輯添加分片上傳示例。

const observable = qiniu.upload(file, key, token, putExtra, config)
const subscription = observable.subscribe(next, error, complete)

就這樣就可以跑通整個(gè)功能的流程，上面SDK使用的參數(shù)在七牛云官網(wǎng)文檔中心寫得非常清晰。下面簡單的翻譯一下：

a、file:當(dāng)前上前端傳的文件對(duì)象；

b、key:七牛云對(duì)象存儲(chǔ)的key值，可以理解為文件名，可以為null，為null的時(shí)候?qū)?huì)按照token生成時(shí)約定的key值進(jìn)行，如果key和生成token的時(shí)候key都沒有約定，系統(tǒng)則使用文件的hash值作為key。

c、token:這個(gè)不需要怎么解釋，文件直傳也是需要用到的，是服務(wù)端生成的上傳憑證。

d、putExtra:一些上傳的擴(kuò)展參數(shù)數(shù)據(jù)。

e、config:一些配置參數(shù)，比如設(shè)置上傳的區(qū)域（qiniu.region.z2代表華南區(qū)等）。

這些參數(shù)的詳細(xì)介紹請(qǐng)參考七牛云官網(wǎng)文檔：https://developer.qiniu.com/kodo/1283/javascript

而subscribe方法中的三個(gè)參數(shù)，看命名大家就應(yīng)該知道是三個(gè)回調(diào)參數(shù)，分別是進(jìn)行進(jìn)行下一步上傳時(shí)觸發(fā)的回調(diào)、錯(cuò)誤回調(diào)、上傳完成的回調(diào)。其中next回調(diào)的數(shù)據(jù)是非常有用的，回調(diào)的數(shù)據(jù)包括如下內(nèi)容：

a、chunks:也就是分分片的信息，比如上面這個(gè)文件就被分成86個(gè)小片，每片包括如下信息:

其中fromeCache就是是否來自緩存，新上傳的時(shí)候fromeCache的值會(huì)是false，如果是斷點(diǎn)續(xù)傳則值是true（七牛云官方表示同一個(gè)hash值的文件在48小時(shí)內(nèi)支持續(xù)傳）；loaded表示當(dāng)前已經(jīng)上傳的文件大??；size則表示正在上傳文件的體積；percent表示當(dāng)前分片上傳進(jìn)度（100則表示100%上傳完成）。

b、uploadInfo：當(dāng)前分配的基本信息，包括id（文件分片id）和url（上傳接口地址，跟前面config里面設(shè)置的上傳區(qū)域有關(guān)系）。

c、total：當(dāng)前這個(gè)整個(gè)文件上傳進(jìn)度，也包括size、loaded、percent三個(gè)參數(shù)。

我們可以利用上述這些數(shù)據(jù)在前端給用戶展示整個(gè)上傳進(jìn)度信息，讓用戶直觀地看到當(dāng)前文件的上傳進(jìn)度，這樣一目了然，當(dāng)然我們自行使用原生開發(fā)也可以實(shí)現(xiàn)類似的功能。

綜上就是使用基于七牛云JavaScript SDK快速實(shí)現(xiàn)大文件分片上傳，并且支持?jǐn)帱c(diǎn)續(xù)傳，這種實(shí)現(xiàn)方式比自行造輪子效率要達(dá)達(dá)提高。大家有相關(guān)應(yīng)用場(chǎng)景需要的時(shí)候，可以參考這種實(shí)現(xiàn)方式，當(dāng)然在具體應(yīng)用的時(shí)候還有一些細(xì)節(jié)需要優(yōu)化處理，歡迎大家聯(lián)系我們交流。