當前端在開發過程中遇到上傳文件需求，如果是上傳頭像、圖片小文件之類的，可以正常按上傳流程處理。但是當遇到上傳大文件需求時，幾個G或者十幾個G，那么需要將這么大的文件分割成許多小片段分別上傳，這種實現思路稱為分片上傳。
實現分片上傳，精髓就是將文件分割成小片段，此時我們需要用到FormData對象和Bolb對象。
核心代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head> <body> <input type="file" name="file" id="file"> <button id="upload" onClick="upload()">上傳</button> <script> //設置每個切片大小 let bytesPerPiece = 1024*1024 //上傳文件函數 function upload(){ //獲取上傳文件 let file = document.getElementById('file').files[0]; let start = 0, end, index = 0, filesize = file.size, name = file.name; //計算切片總數 let totalPieces = Math.ceil(filesize/bytesPerPiece); while(start < totalPieces){ end = start + bytesPerPiece; if(end > filesize){ end = filesize } let chunk = file.slice(start, end); let formData = new FormData(); formData.append('file', chunk, filename); //原生js發請求 // let xhr = new XMLHttpRequest(); // xhr.onreadystatechange = function(){ // if(this.readyState == 4 && this.status == 200){ // } // } // xhr.open('post', '/api/upload', true); // xhr.send(formData); // 使用jquery,需要將contentType，processData設置為false // $.ajax({ // url: '/api/upload', // type: 'post', // data: formData, // processData: false, // contentType: false // }).success(res=>{ // }).error(err=>{ // }) } } </script> </body> </html>
附加： 斷點續傳
理解：斷點續傳，就是在我們上傳過程中由於意外原因斷網斷電情況讓上傳終止了，那么上傳的是不完整的，我們需要向服務器查詢一下相同名字的文件大小，然后將上傳位置設置成這個大小即可。