最近碰見一個須要上傳百兆大文件的需求，調研了七牛和騰訊雲的切片分段上傳功能，所以在此整理前端大文件上傳相關功能的實現。php
在某些業務中，大文件上傳是一個比較重要的交互場景，如上傳入庫比較大的Excel表格數據、上傳影音文件等。若是文件體積比較大，或者網絡條件很差時，上傳的時間會比較長（要傳輸更多的報文，丟包重傳的機率也更大），用戶不能刷新頁面，只能耐心等待請求完成。前端
下面從文件上傳方式入手，整理大文件上傳的思路，並給出了相關實例代碼，因爲PHP內置了比較方便的文件拆分和拼接方法，所以服務端代碼使用PHP進行示例編寫。java
本文相關示例代碼位於github上，主要參考ios
聊聊大文件上傳git
大文件切割上傳github
文件上傳的幾種方式web
首先咱們來看看文件上傳的幾種方式。數據庫
普通表單上傳json
使用PHP來展現常規的表單上傳是一個不錯的選擇。首先構建文件上傳的表單，並指定表單的提交內容類型爲enctype="multipart/form-data"，代表表單須要上傳二進制數據。canvas
而後編寫index.php上傳文件接收代碼，使用move_uploaded_file方法便可(php大法好…)
form表單上傳大文件時，很容易碰見服務器超時的問題。經過xhr，前端也能夠進行異步上傳文件的操做，通常由兩個思路。
文件編碼上傳
第一個思路是將文件進行編碼，而後在服務端進行解碼，以前寫過一篇在前端實現圖片壓縮上傳的博客，其主要實現原理就是將圖片轉換成base64進行傳遞
varimgURL = URL.createObjectURL(file);
ctx.drawImage(imgURL, 0, 0);
// 獲取圖片的編碼，而後將圖片當作是一個很長的字符串進行傳遞
vardata= canvas.toDataURL( "image/jpeg", 0.5);
在服務端須要作的事情也比較簡單，首先解碼base64，而後保存圖片便可
$imgData = $_REQUEST[ 'imgData'];
$base64 = explode( ',', $imgData)[ 1];
$img = base64_decode($base64);
$url = './test.jpg';
if(file_put_contents($url, $img)) {
exit(json_encode( array(
url => $url
)));
}
base64編碼的缺點在於其體積比原圖片更大（由於Base64將三個字節轉化成四個字節，所以編碼後的文本，會比原文本大出三分之一左右），對於體積很大的文件來講，上傳和解析的時間會明顯增長。
更多關於base64的知識，能夠參考Base64筆記。
除了進行base64編碼，還能夠在前端直接讀取文件內容後以二進制格式上傳
// 讀取二進制文件
functionreadBinary(text){
vardata = newArrayBuffer(text.length);
varui8a = newUint8Array(data, 0);
for( vari = 0; i < text.length; i++){
ui8a[i] = (text.charCodeAt(i) & 0xff);
}
console.log(ui8a)
}
varreader = newFileReader;
reader. = function{
readBinary( this.result) // 讀取result或直接上傳
}
// 把從input裏讀取的文件內容，放到fileReader的result字段裏
reader.readAsBinaryString(file);
formData異步上傳
FormData對象主要用來組裝一組用 發送請求的鍵/值對，能夠更加靈活地發送Ajax請求。可使用FormData來模擬表單提交。
letfiles = e.target.files // 獲取input的file對象
letformData = newFormData;
formData.append( 'file', file);
axios.post(url, formData);
服務端處理方式與直接form表單請求基本相同。
iframe無刷新頁面
在低版本的瀏覽器（如IE）上，xhr是不支持直接上傳formdata的，所以只能用form來上傳文件，而form提交自己會進行頁面跳轉，這是由於form表單的target屬性致使的，其取值有
_self，默認值，在相同的窗口中打開響應頁面
_blank，在新窗口打開
_parent，在父窗口打開
_top，在最頂層的窗口打開
framename，在指定名字的iframe中打開
若是須要讓用戶體驗異步上傳文件的感受，能夠經過framename指定iframe來實現。把form的target屬性設置爲一個看不見的iframe，那麼返回的數據就會被這個iframe接受，所以只有該iframe會被刷新，至於返回結果，也能夠經過解析這個iframe內的文原本獲取。
functionupload{
varnow = + newDate
varid = 'frame'+ now
$( "body").append( `<iframe style="display:none;" name="${id}" id="${id}" />`);
var$form = $( "#myForm")
$form.attr({
"action": '/index.php',
"method": "post",
"enctype": "multipart/form-data",
"encoding": "multipart/form-data",
"target": id
}).submit
$( "#"+id).on( "load", function{
varcontent = $( this).contents.find( "body").text
try{
vardata = JSON.parse(content)
} catch(e){
console.log(e)
}
})
}
大文件上傳
如今來看看在上面提到的幾種上傳方式中實現大文件上傳會碰見的超時問題，
表單上傳和iframe無刷新頁面上傳，實際上都是經過form標籤進行上傳文件，這種方式將整個請求徹底交給瀏覽器處理，當上傳大文件時，可能會碰見請求超時的情形
經過fromData，其實際也是在xhr中封裝一組請求參數，用來模擬表單請求，沒法避免大文件上傳超時的問題
編碼上傳，咱們能夠比較靈活地控制上傳的內容
大文件上傳最主要的問題就在於：在同一個請求中，要上傳大量的數據，致使整個過程會比較漫長，且失敗後須要重頭開始上傳。試想，若是咱們將這個請求拆分紅多個請求，每一個請求的時間就會縮短，且若是某個請求失敗，只須要從新發送這一次請求便可，無需從頭開始，這樣是否能夠解決大文件上傳的問題呢？
綜合上面的問題，看來大文件上傳須要實現下面幾個需求
支持拆分上傳請求(即切片)
支持斷點續傳
支持顯示上傳進度和暫停上傳
接下來讓咱們依次實現這些功能，看起來最主要的功能應該就是切片了。
文件切片
參考： 大文件切割上傳
編碼方式上傳中，在前端咱們只要先獲取文件的二進制內容，而後對其內容進行拆分，最後將每一個切片上傳到服務端便可。
在Java中，文件FIle對象是Blob對象的子類，Blob對象包含一個重要的方法slice，經過這個方法，咱們就能夠對二進制文件進行拆分。
下面是一個拆分文件的示例，對於up6來講開發者不須要關心拆分的細節，由控件幫助實現，開發者只須要關心業務邏輯便可。
控件上傳的時候會爲每個文件塊數據添加相關的信息，開發者在服務端接收到數據後能夠自已進行處理。
服務器接收到這些切片後，再將他們拼接起來就能夠了，下面是PHP拼接切片的示例代碼
對於up6來講，開發人員不須要進行拼接，up6已經提供了示例代碼，已經實現了這個邏輯。
保證惟一性，控件會爲每個文件塊添加信息，如塊索引，塊MD5,文件MD5
斷點續傳
up6自帶續傳功能，up6在服務端已經保存了文件的信息，在客戶端也保存了文件的進度信息。在上傳時控件會自動加載文件進度信息，開發者不須要關心這些細節。在文件塊的處理邏輯中只須要根據文件塊索引來識別便可。
此時上傳時刷新頁面或者關閉瀏覽器，再次上傳相同文件時，以前已經上傳成功的切片就不會再從新上傳了。
服務端實現斷點續傳的邏輯基本類似，只要在getUploadSliceRecord內部調用服務端的查詢接口獲取已上傳切片的記錄便可，所以這裏再也不展開。
此外斷點續傳還須要考慮切片過時的狀況：若是調用了mkfile接口，則磁盤上的切片內容就能夠清除掉了，若是客戶端一直不調用mkfile的接口，聽任這些切片一直保存在磁盤顯然是不可靠的，通常狀況下，切片上傳都有一段時間的有效期，超過該有效期，就會被清除掉。基於上述緣由，斷點續傳也必須同步切片過時的實現邏輯。
續傳效果
上傳進度和暫停
經過xhr.upload中的progress方法能夠實現監控每個切片上傳進度。
上傳暫停的實現也比較簡單，經過xhr.abort能夠取消當前未完成上傳切片的上傳，實現上傳暫停的效果，恢復上傳就跟斷點續傳相似，先獲取已上傳的切片列表，而後從新發送未上傳的切片。
因爲篇幅關係，上傳進度和暫停的功能這裏就先不實現了。
實現效果：
小結
目前社區已經存在一些成熟的大文件上傳解決方案，如七牛SDK，騰訊雲SDK等，也許並不須要咱們手動去實現一個簡陋的大文件上傳庫，可是瞭解其原理仍是十分有必要的。
本文首先整理了前端文件上傳的幾種方式，而後討論了大文件上傳的幾種場景，以及大文件上傳須要實現的幾個功能
經過Blob對象的slice方法將文件拆分紅切片
整理了服務端還原文件所需條件和參數，演示了PHP將切片還原成文件
經過保存已上傳切片的記錄來實現斷點續傳
還留下了一些問題，如：合併文件時避免內存溢出、切片失效策略、上傳進度暫停等功能，並無去深刻或一一實現，繼續學習吧
後端代碼邏輯大部分是相同的，目前可以支持MySQL,Oracle,SQL。在使用前須要配置一下數據庫，能夠參考我寫的這篇文章：http://blog.ncmem.com/wordpress/2019/08/12/java-http%E5%A4%A7%E6%96%87%E4%BB%B6%E6%96%AD%E7%82%B9%E7%BB%AD%E4%BC%A0%E4%B8%8A%E4%BC%A0/