js 大檔案上傳和斷點續傳

大檔案上傳和斷點續傳是一種解決網頁上傳大檔案時遇到的問題的方案。以下是一個簡單實作大檔案上傳和斷點續傳的 JavaScript 代碼示例：

javascriptCopy code// 初始化上傳
function uploadFile(file) {
  const chunkSize = 1024 * 1024 * 2; // 分片大小，每個分片2MB
  const fileSize = file.size; // 檔案大小
  const chunkNum = Math.ceil(fileSize / chunkSize); // 分片數量
  let uploadedSize = 0; // 已上傳大小
  let chunks = []; // 分片清單
  // 上傳分片
  function uploadChunks() {
    if (chunks.length === chunkNum) {
      // 所有分片上傳完成，合并分片
      mergeChunks();
      return;
    }
    const start = chunks.length * chunkSize; // 分片起始位置
    const end = Math.min(start + chunkSize, fileSize); // 分片結束位置
    const chunk = file.slice(start, end); // 擷取分片
    const fd = new FormData(); // 建立表單資料
    fd.append('chunk', chunk);
    fd.append('chunkNum', chunks.length + 1);
    fd.append('fileName', file.name);
    fd.append('fileSize', fileSize);
    const xhr = new XMLHttpRequest(); // 建立 AJAX 請求
    xhr.open('POST', 'upload.php', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        const res = JSON.parse(xhr.responseText);
        if (res.code === 0) {
          uploadedSize += chunk.size;
          chunks.push(res.data);
          // 更新上傳進度
          const progress = uploadedSize / fileSize;
          updateProgress(progress);
          // 繼續上傳下一個分片
          uploadChunks();
        }
      }
    };
    xhr.send(fd);
  }
  // 合并分片
  function mergeChunks() {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'merge.php', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        const res = JSON.parse(xhr.responseText);
        if (res.code === 0) {
          // 上傳完成
          const url = res.data;
          uploadSuccess(url);
        }
      }
    };
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({
      fileName: file.name,
      fileSize: fileSize,
      chunks: chunks
    }));
  }
  // 更新上傳進度
  function updateProgress(progress) {
    // 更新進度條等UI
  }
  // 上傳成功
  function uploadSuccess(url) {
    // 處理上傳成功後的邏輯
  }
  // 開始上傳
  uploadChunks();
}
           

上面的代碼中，uploadFile 函數會先根據檔案大小和分片大小計算出分片數量，然後依次上傳每個分片，并記錄已上傳分片的資訊。當所有分片上傳完成後，會調用 mergeChunks 函數将分片合并，并傳遞檔案名、檔案大小和分片資訊給後端進行合并操作。最後，如果合并成功，就會調用 uploadSuccess 函數進行上傳成功後的處理。 需要注意的是，上面的代碼隻是一個簡單的示例，實際情況下還需要處理一些異常情況，如分片上傳失敗、合并失敗等。