大文件怎樣實現快速上傳？

前言

大文件快速上傳的方案，相信你也有過了解，其實無非就是將 文件變小，也就是通過 壓縮文件資源 或者 文件資源分塊 後再上傳。

本文只介紹資源分塊上傳的方式，並且會通過 前端（vue3 + vite） 和 服務端（nodejs + koa2） 交互的方式，實現大文件分塊上傳的簡單功能.

梳理思路

問題 1：誰負責資源分塊？誰負責資源整合？

當然這個問題也很簡單，肯定是前端負責分塊，服務端負責整合.

問題 2：前端怎麼對資源進行分塊？

首先是選擇上傳的文件資源，接着就可以得到對應的文件對象 File，而 File.prototype.slice 方法可以實現資源的分塊，當然也有人說是 Blob.prototype.slice 方法，因爲 Blob.prototype.slice === File.prototype.slice.

問題 3：服務端怎麼知道什麼時候要整合資源？如何保證資源整合的有序性？

由於前端會將資源分塊，然後單獨發送請求，也就是說，原來 1 個文件對應 1 個上傳請求，現在可能會變成 1 個文件對應 n 個上傳請求，所以前端可以基於 Promise.all 將這多個接口整合，上傳完成在發送一個合併的請求，通知服務端進行合併。

合併時可通過 nodejs 中的讀寫流（readStream/writeStream），將所有切片的流通過管道（pipe）輸入最終文件的流中。

在發送請求資源時，前端會定好每個文件對應的序號，並將當前分塊、序號以及文件 hash 等信息一起發送給服務端，服務端在進行合併時，通過序號進行依次合併即可。

問題 4：如果某個分塊的上傳請求失敗了，怎麼辦？

一旦服務端某個上傳請求失敗，會返回當前分塊失敗的信息，其中會包含文件名稱、文件 hash、分塊大小以及分塊序號等，前端拿到這些信息後可以進行重傳，同時考慮此時是否需要將 Promise.all 替換爲 Promise.allSettled 更方便.

前端部分

創建項目

通過 pnpm create vite 創建項目，對應文件目錄如下.

請求模塊

src/request.js 該文件就是針對 axios 進行簡單的封裝，如下：

import axios from "axios";

const baseURL = 'http://localhost:3001';

export const uploadFile = (url, formData, onUploadProgress = () => { }) => {  
  return axios({  
    method: 'post',  
    url,  
    baseURL,   
    headers: {   
      'Content-Type': 'multipart/form-data'   
    },  
    data: formData,   
    onUploadProgress 
  });
}

export const mergeChunks = (url, data) => { 
  return axios({  
    method: 'post',  
    url,    baseURL,   
    headers: { 
      'Content-Type': 'application/json'  
    },  
    data 
  });
}

文件資源分塊

根據 DefualtChunkSize = 5 * 1024 * 1024 ，即 5 MB ，來對文件進行資源分塊進行計算，通過 spark-md5[1] 根據文件內容計算出文件的 hash 值，方便做其他優化，比如：當 hash 值不變時，服務端沒有必要重複讀寫文件等.

// 獲取文件分塊
const getFileChunk = (file, chunkSize = DefualtChunkSize) => { 
  return new Promise((resovle) => { 
    let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,  
      chunks = Math.ceil(file.size / chunkSize),   
      currentChunk = 0,    
      spark = new SparkMD5.ArrayBuffer(),     
      fileReader = new FileReader();  
      
    fileReader.onload = function (e) {   
      console.log('read chunk nr', currentChunk + 1, 'of');     
      
      const chunk = e.target.result;  
      spark.append(chunk);    
      currentChunk++;   
      
      if (currentChunk < chunks) {     
        loadNext();   
      } else {    
        let fileHash = spark.end();     
        console.info('finished computed hash', fileHash);      
        resovle({ fileHash });   
      }  
    };   
    
    fileReader.onerror = function () {    
      console.warn('oops, something went wrong.');   
    };  
    
    function loadNext() {    
      let start = currentChunk * chunkSize,     
        end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize; 
      let chunk = blobSlice.call(file, start, end);  
      fileChunkList.value.push({ chunk, size: chunk.size, name: currFile.value.name });    
      fileReader.readAsArrayBuffer(chunk);  
    }  
    
    loadNext(); 
  });
}

發送上傳請求和合並請求

通過 Promise.all 方法整合所以分塊的上傳請求，在所有分塊資源上傳完畢後，在 then 中發送合併請求.

// 上傳請求
const uploadChunks = (fileHash) => { 
  const requests = fileChunkList.value.map((item, index) => {  
    const formData = new FormData();  
    formData.append(`${currFile.value.name}-${fileHash}-${index}`, item.chunk);  
    formData.append("filename", currFile.value.name);   
    formData.append("hash", `${fileHash}-${index}`);  
    formData.append("fileHash", fileHash);  
    return uploadFile('/upload', formData, onUploadProgress(item)); 
  });
  
  Promise.all(requests).then(() => {  
    mergeChunks('/mergeChunks', { size: DefualtChunkSize, filename: currFile.value.name }); 
  });
}

進度條數據

分塊進度數據利用 axios 中的 onUploadProgress 配置項獲取數據，通過使用 computed 根據分塊進度數據的變化自動自動計算當前文件的總進度.

// 總進度條
const totalPercentage = computed(() => { 
  if (!fileChunkList.value.length) return 0;
  const loaded = fileChunkList.value  
    .map(item => item.size * item.percentage)  
    .reduce((curr, next) => curr + next); 
  return parseInt((loaded / currFile.value.size).toFixed(2));
})

// 分塊進度條
const onUploadProgress = (item) => (e) => { 
  item.percentage = parseInt(String((e.loaded / e.total) * 100));
}

服務端部分

搭建服務

目錄 / 文件劃分

server/server.js

該文件是服務端具體的代碼實現，用於處理接收和整合分塊資源.

server/resources

該目錄是用於存放單文件的多個分塊，以及最後分塊整合後的資源：

接收分塊

使用 koa-body 中的 formidable 配置中的 onFileBegin 函數處理前端傳來的 FormData 中的文件資源，在前端處理對應分塊名時的格式爲：filename-fileHash-index，所以這裏直接將分塊名拆分即可獲得對應的信息。

// 上傳請求
router.post( 
  '/upload',  
  // 處理文件 form-data 數據  
  koaBody({ 
    multipart: true,  
    formidable: {  
      uploadDir: outputPath,    
      onFileBegin: (name, file) => {      
        const [filename, fileHash, index] = name.split('-');      
        const dir = path.join(outputPath, filename);        
        // 保存當前 chunk 信息，發生錯誤時進行返回    
        currChunk = {     
          filename,     
          fileHash,      
          index     
        };     
        
        // 檢查文件夾是否存在如果不存在則新建文件夾    
        if (!fs.existsSync(dir)) {    
          fs.mkdirSync(dir);   
        }    
        
        // 覆蓋文件存放的完整路徑    
        file.path = `${dir}/${fileHash}-${index}`;   
      },   
      onError: (error) => {     
        app.status = 400;  
        app.body = { code: 400, msg: "上傳失敗", data: currChunk };      
        return;    
      },  
    }, 
  }), 
  // 處理響應  
  async (ctx) => { 
    ctx.set("Content-Type", "application/json"); 
    ctx.body = JSON.stringify({   
      code: 2000,   
      message: 'upload successfully！' 
    }); 
  });

整合分塊

通過文件名找到對應文件分塊目錄，使用 fs.readdirSync(chunkDir) 方法獲取對應目錄下所以分塊的命名，在通過 fs.createWriteStream/fs.createReadStream 創建可寫 / 可讀流，結合管道 pipe 將流整合在同一文件中，合併完成後通過 fs.rmdirSync(chunkDir) 刪除對應分塊目錄.

// 合併請求
router.post('/mergeChunks', async (ctx) => { 
  const { filename, size } = ctx.request.body;  
  // 合併 chunks 
  await mergeFileChunk(path.join(outputPath, '_' + filename), filename, size);  
  
  // 處理響應 
  ctx.set("Content-Type", "application/json"); 
  ctx.body = JSON.stringify({ 
    data: {   
      code: 2000,   
      filename,    
      size  
    },  
    message: 'merge chunks successful！' 
  });
});

// 通過管道處理流
const pipeStream = (path, writeStream) => {
  return new Promise(resolve => {  
    const readStream = fs.createReadStream(path);  
    readStream.pipe(writeStream);   
    readStream.on("end", () => {   
      fs.unlinkSync(path);    
      resolve();  
    }); 
  });
}

// 合併切片
const mergeFileChunk = async (filePath, filename, size) => {  
  const chunkDir = path.join(outputPath, filename); 
  const chunkPaths = fs.readdirSync(chunkDir); 
  
  if (!chunkPaths.length) return;  
  
  // 根據切片下標進行排序，否則直接讀取目錄的獲得的順序可能會錯亂 
  chunkPaths.sort((a, b) => a.split("-")[1] - b.split("-")[1]); 
  console.log("chunkPaths = ", chunkPaths); 
  
  await Promise.all(  
    chunkPaths.map((chunkPath, index) =>    
      pipeStream(     
        path.resolve(chunkDir, chunkPath),     
        // 指定位置創建可寫流   
        fs.createWriteStream(filePath, {   
          start: index * size,      
          end: (index + 1) * size    
        })   
      ) 
    )
  ); 
  
  // 合併後刪除保存切片的目錄
  fs.rmdirSync(chunkDir);
};

前端 & 服務端 交互

前端分塊上傳

測試文件信息：

選擇文件類型爲 19.8MB，而且上面設定默認分塊大小爲 5MB ，於是應該要分成 4 個分塊，即 4 個請求.

圖片過大，截圖處理

服務端分塊接收

前端發送合併請求

服務端合併分塊

擴展 —— 斷點續傳 & 秒傳

有了上面的核心邏輯之後，要實現斷點續傳和秒傳的功能，只需要在取擴展即可，這裏不再給出具體實現，只列出一些思路.

斷點續傳

斷點續傳其實就是讓請求可中斷，然後在接着上次中斷的位置繼續發送，此時要保存每個請求的實例對象，以便後期取消對應請求，並將取消的請求保存或者記錄原始分塊列表取消位置信息等，以便後期重新發起請求.

取消請求的幾種方式

秒傳

不要被這個名字給誤導了，其實所謂的秒傳就是不用傳，在正式發起上傳請求時，先發起一個檢查請求，這個請求會攜帶對應的文件 hash 給服務端，服務端負責查找是否存在一模一樣的文件 hash，如果存在此時直接複用這個文件資源即可，不需要前端在發起額外的上傳請求.

最後

前端分片上傳的內容單純從理論上來看其實還是容易理解的，但是實際自己去實現的時候還是會踩一些坑，比如服務端接收解析 formData 格式的數據時，沒法獲取文件的二進制數據等

參考資料

[1]

spark-md5 :https://www.npmjs.com/package/spark-md5

作者：熊的貓

鏈接：https://juejin.cn/post/7074534222748188685

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/GWbhoydThW6mvr8M9qWkDg

猜你喜歡