文件分片上傳的實現步驟包括：1.切割文件為多個分片；2.并發上傳以提高效率；3.處理錯誤與重試機制；4.服務器端合并分片。首先，通過html提供文件選擇和上傳按鈕，利用JavaScript讀取文件并計算總分片數，使用file.slice方法將文件切割為指定大小的分片，默認推薦2mb-5mb。其次，采用promise.all實現并發上傳，同時控制并發數量以降低服務器壓力。接著，在上傳失敗時加入重試機制，例如指數退避算法避免頻繁請求。最后，服務器端需記錄每個分片狀態，待所有分片上傳完成后按順序合并為完整文件。此外還需優化用戶體驗，如顯示進度條、支持拖拽上傳、給出錯誤提示等。
文件分片上傳，簡單來說，就是把一個大文件切成很多小塊，一塊一塊地傳到服務器。這樣做的好處顯而易見：速度更快、容錯性更高。如果其中一片上傳失敗，只需要重傳那一片就行，不用整個文件重來。
JS實現文件分片上傳，核心在于如何切割文件、如何并發上傳、以及如何處理上傳過程中的錯誤和重試。優化技巧則圍繞著如何提升上傳速度、降低服務器壓力、以及改善用戶體驗展開。
解決方案
首先，我們需要一個HTML文件，包含一個文件選擇框和一個上傳按鈕：
<input type="file" id="fileInput"> <button id="uploadButton">上傳</button> <div id="progress"></div>
然后，是核心的JavaScript代碼：
const fileInput = document.getElementById('fileInput'); const uploadButton = document.getElementById('uploadButton'); const progressDiv = document.getElementById('progress'); const chunkSize = 1024 * 1024 * 2; // 2MB，可以根據實際情況調整 const uploadUrl = '/upload'; // 你的上傳接口 uploadButton.addEventListener('click', async () => { const file = fileInput.files[0]; if (!file) { alert('請選擇文件'); return; } const totalChunks = Math.ceil(file.size / chunkSize); let uploadedChunks = 0; for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) { const start = chunkIndex * chunkSize; const end = Math.min(file.size, start + chunkSize); const chunk = file.slice(start, end); const formData = new FormData(); formData.append('file', chunk); formData.append('chunkIndex', chunkIndex); formData.append('totalChunks', totalChunks); formData.append('filename', file.name); try { const response = await fetch(uploadUrl, { method: 'POST', body: formData, }); if (!response.ok) { throw new Error(`上傳失敗: ${response.status}`); } uploadedChunks++; const progress = (uploadedChunks / totalChunks) * 100; progressDiv.textContent = `上傳進度: ${progress.toFixed(2)}%`; } catch (error) { console.error('上傳出錯:', error); // 這里可以加入重試機制，或者提示用戶重試 } } alert('上傳完成!'); });
這段代碼的核心邏輯是：
- 讀取文件，計算總分片數。
- 循環遍歷每個分片，使用 file.slice 方法切割文件。
- 將分片數據、分片索引、總分片數等信息放入 FormData。
- 使用 fetch API 發送請求到服務器。
- 根據服務器返回的狀態，更新上傳進度。
- 如果上傳失敗，進行錯誤處理（例如重試）。
當然，這只是一個最簡單的實現，實際應用中還需要考慮更多因素。
如何選擇合適的分片大小？
分片大小的選擇，其實是一個trade-off。分片太小，請求次數多，http開銷大；分片太大，一旦出錯，重傳的代價也大。
一般來說，2MB-5MB是一個比較合適的范圍。你可以根據你的網絡環境、服務器性能、以及文件大小進行調整。如果網絡狀況良好，服務器性能足夠強勁，可以適當增大分片大小。反之，則應該減小分片大小。
另外，還可以考慮使用動態分片大小。例如，一開始使用較小的分片大小，如果上傳速度很快，則逐漸增大分片大小。
如何實現斷點續傳？
斷點續傳是分片上傳的一個重要特性，它可以避免在上傳過程中，由于網絡中斷或其他原因導致上傳失敗時，需要重新上傳整個文件。
實現斷點續傳的關鍵在于：服務器需要記錄每個分片的狀態。
具體來說，當客戶端上傳一個分片后，服務器需要將該分片的狀態（例如已上傳）保存起來。下次客戶端再次上傳時，服務器可以根據已保存的狀態，跳過已經上傳的分片，只上傳未上傳的分片。
客戶端也需要記錄已上傳的分片索引，以便在上傳失敗后，從上次中斷的地方繼續上傳。
一種簡單的實現方式是，在上傳每個分片時，都帶上文件的唯一標識符（例如文件名）和分片索引。服務器根據這些信息，判斷該分片是否已經上傳。
如何優化并發上傳？
上面的代碼是串行上傳的，也就是說，一個分片上傳完成后，才會上傳下一個分片。這樣做效率比較低。
可以考慮使用并發上傳，也就是同時上傳多個分片。
一種簡單的實現方式是使用 Promise.all：
const uploadPromises = []; for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) { // ... (創建formData) const uploadPromise = fetch(uploadUrl, { method: 'POST', body: formData, }); uploadPromises.push(uploadPromise); } await Promise.all(uploadPromises);
這段代碼會同時上傳所有的分片。但是，并發上傳的數量不宜過多，否則可能會導致服務器壓力過大。
可以限制并發上傳的數量，例如同時上傳3個分片。當一個分片上傳完成后，再上傳一個新的分片。
如何處理上傳錯誤和重試？
上傳過程中，難免會遇到各種各樣的錯誤，例如網絡中斷、服務器錯誤等。
為了提高上傳的可靠性，需要加入重試機制。
一種簡單的實現方式是，在上傳失敗后，等待一段時間后，再次嘗試上傳。可以設置最大重試次數，避免無限重試。
另外，還可以考慮使用指數退避算法，也就是每次重試的間隔時間都翻倍。這樣可以避免在網絡狀況不佳時，頻繁重試導致服務器壓力過大。
如何在服務器端合并分片？
當所有分片都上傳完成后，需要在服務器端將這些分片合并成一個完整的文件。
具體的實現方式取決于你使用的服務器端技術。
一種常見的做法是，在服務器端創建一個臨時目錄，用于存放上傳的分片。當所有分片都上傳完成后，將這些分片按順序寫入到一個新的文件中。
需要注意的是，在合并分片時，需要確保分片的順序正確。可以通過分片索引來保證順序。
如何提高用戶體驗？
除了技術上的優化，還可以通過一些方式來提高用戶體驗：
- 顯示上傳進度： 讓用戶清楚地了解上傳進度，避免焦慮。
- 支持拖拽上傳： 允許用戶直接將文件拖拽到頁面上進行上傳，更加方便。
- 錯誤提示： 當上傳失敗時，給出明確的錯誤提示，幫助用戶解決問題。
- 上傳完成提示： 當上傳完成后，給出明確的提示，讓用戶知道上傳已經完成。
總之，文件分片上傳是一個復雜的技術，需要考慮很多因素。通過不斷地學習和實踐，才能掌握這項技術，并將其應用到實際項目中。
