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

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

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

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

1、首先引入SDK。

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

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

b、使用npm安裝：

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

c、通過源碼編譯：git clone git@github.com:qiniu/js-sdk.git，進入項目根目錄執(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)

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

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

b、key:七牛云對象存儲的key值，可以理解為文件名，可以為null，為null的時候?qū)凑誸oken生成時約定的key值進行，如果key和生成token的時候key都沒有約定，系統(tǒng)則使用文件的hash值作為key。

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

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

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

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

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

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

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

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

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

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

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