懒人听书,重生之毒妃梅果小说,小说网

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

大文件怎樣實(shí)現(xiàn)快速上傳？

前言

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

創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，包括成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營銷策劃推廣、電子商務(wù)、移動(dòng)互聯(lián)網(wǎng)營銷等。創(chuàng)新互聯(lián)為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，創(chuàng)新互聯(lián)核心團(tuán)隊(duì)10多年專注互聯(lián)網(wǎng)開發(fā)，積累了豐富的網(wǎng)站經(jīng)驗(yàn)，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹立了良好口碑。

本文只介紹資源分塊上傳的方式，并且會(huì)通過前端（vue3 + vite）和服務(wù)端（nodejs + koa2）交互的方式，實(shí)現(xiàn)大文件分塊上傳的簡單功能。

梳理思路

問題 1：誰負(fù)責(zé)資源分塊？誰負(fù)責(zé)資源整合？

當(dāng)然這個(gè)問題也很簡單，肯定是前端負(fù)責(zé)分塊，服務(wù)端負(fù)責(zé)整合.

問題 2：前端怎么對(duì)資源進(jìn)行分塊？

首先是選擇上傳的文件資源，接著就可以得到對(duì)應(yīng)的文件對(duì)象 File，而 File.prototype.slice 方法可以實(shí)現(xiàn)資源的分塊，當(dāng)然也有人說是 Blob.prototype.slice 方法，因?yàn)?Blob.prototype.slice === File.prototype.slice.

問題 3：服務(wù)端怎么知道什么時(shí)候要整合資源？如何保證資源整合的有序性？

由于前端會(huì)將資源分塊，然后單獨(dú)發(fā)送請(qǐng)求，也就是說，原來 1 個(gè)文件對(duì)應(yīng) 1 個(gè)上傳請(qǐng)求，現(xiàn)在可能會(huì)變成 1 個(gè)文件對(duì)應(yīng) n 個(gè)上傳請(qǐng)求，所以前端可以基于 Promise.all 將這多個(gè)接口整合，上傳完成在發(fā)送一個(gè)合并的請(qǐng)求，通知服務(wù)端進(jìn)行合并。

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

在發(fā)送請(qǐng)求資源時(shí)，前端會(huì)定好每個(gè)文件對(duì)應(yīng)的序號(hào)，并將當(dāng)前分塊、序號(hào)以及文件 hash 等信息一起發(fā)送給服務(wù)端，服務(wù)端在進(jìn)行合并時(shí)，通過序號(hào)進(jìn)行依次合并即可。

問題 4：如果某個(gè)分塊的上傳請(qǐng)求失敗了，怎么辦？

一旦服務(wù)端某個(gè)上傳請(qǐng)求失敗，會(huì)返回當(dāng)前分塊失敗的信息，其中會(huì)包含文件名稱、文件 hash、分塊大小以及分塊序號(hào)等，前端拿到這些信息后可以進(jìn)行重傳，同時(shí)考慮此時(shí)是否需要將 Promise.all 替換為 Promise.allSettled 更方便。

前端部分

創(chuàng)建項(xiàng)目

通過 pnpm create vite 創(chuàng)建項(xiàng)目，對(duì)應(yīng)文件目錄如下：

請(qǐng)求模塊

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

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  
 });
}

文件資源分塊

根據(jù) DefualtChunkSize = 5 * 1024 * 1024 ，即 5 MB ，來對(duì)文件進(jìn)行資源分塊進(jìn)行計(jì)算，通過 spark-md5[1] 根據(jù)文件內(nèi)容計(jì)算出文件的 hash 值，方便做其他優(yōu)化，比如：當(dāng) hash 值不變時(shí)，服務(wù)端沒有必要重復(fù)讀寫文件等。

// 獲取文件分塊
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();  
 });
}

發(fā)送上傳請(qǐng)求和合并請(qǐng)求

通過 Promise.all 方法整合所以分塊的上傳請(qǐng)求，在所有分塊資源上傳完畢后，在 then 中發(fā)送合并請(qǐng)求。

// 上傳請(qǐng)求
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 });  
 });
}

進(jìn)度條數(shù)據(jù)

分塊進(jìn)度數(shù)據(jù)利用 axios 中的 onUploadProgress 配置項(xiàng)獲取數(shù)據(jù)，通過使用computed 根據(jù)分塊進(jìn)度數(shù)據(jù)的變化自動(dòng)自動(dòng)計(jì)算當(dāng)前文件的總進(jìn)度。

// 總進(jìn)度條
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));
})
// 分塊進(jìn)度條
const onUploadProgress = (item) => (e) => {  
 item.percentage = parseInt(String((e.loaded / e.total) * 100));
}

服務(wù)端部分

搭建服務(wù)

使用 koa2 搭建簡單的服務(wù)，端口為 3001
使用 koa-body 處理接收前端傳遞 'Content-Type': 'multipart/form-data' 類型的數(shù)據(jù)
使用 koa-router 注冊(cè)服務(wù)端路由
使用 koa2-cors 處理跨域問題

目錄/文件劃分

server/server.js

該文件是服務(wù)端具體的代碼實(shí)現(xiàn)，用于處理接收和整合分塊資源。

server/resources

該目錄是用于存放單文件的多個(gè)分塊，以及最后分塊整合后的資源：

分塊資源未合并時(shí)，會(huì)在該目錄下以當(dāng)前文件名創(chuàng)建一個(gè)目錄，用于存放這個(gè)該文件相關(guān)的所有分塊
分塊資源需合并時(shí)，會(huì)讀取這個(gè)文件對(duì)應(yīng)的目錄下的所有分塊資源，然后將它們整合成原文件
分塊資源合并完成，會(huì)刪除這個(gè)對(duì)應(yīng)的文件目錄，只保留合并后的原文件，生成的文件名比真實(shí)文件名多一個(gè) _ 前綴，如原文件名 "測(cè)試文件.txt" 對(duì)應(yīng)合并后的文件名 "_測(cè)試文件.txt"

接收分塊

使用 koa-body 中的 formidable 配置中的 onFileBegin 函數(shù)處理前端傳來的 FormData 中的文件資源，在前端處理對(duì)應(yīng)分塊名時(shí)的格式為：filename-fileHash-index，所以這里直接將分塊名拆分即可獲得對(duì)應(yīng)的信息。

// 上傳請(qǐng)求
router.post(  
 '/upload',  
 // 處理文件 form-data 數(shù)據(jù)  
  koaBody({  
   multipart: true,  
   formidable: {  
     uploadDir: outputPath,    
     onFileBegin: (name, file) => {      
       const [filename, fileHash, index] = name.split('-');      
       const dir = path.join(outputPath, filename);        
       // 保存當(dāng)前 chunk 信息，發(fā)生錯(cuò)誤時(shí)進(jìn)行返回    
        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;    
     },  
    },  
  }),  
 // 處理響應(yīng)  
  async (ctx) => {  
    ctx.set("Content-Type", "application/json");  
    ctx.body = JSON.stringify({    
      code: 2000,    
      message: 'upload successfully！'  
    });  
 });

整合分塊

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

// 合并請(qǐng)求
router.post('/mergeChunks', async (ctx) => {  
 const { filename, size } = ctx.request.body;  
  // 合并 chunks  
 await mergeFileChunk(path.join(outputPath, '_' + filename), filename, size);  

  // 處理響應(yīng)  
  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;  

  // 根據(jù)切片下標(biāo)進(jìn)行排序，否則直接讀取目錄的獲得的順序可能會(huì)錯(cuò)亂  
  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),      
        // 指定位置創(chuàng)建可寫流    
        fs.createWriteStream(filePath, {    
         start: index * size,      
         end: (index + 1) * size    
        })    
      )  
   )
  );  

 // 合并后刪除保存切片的目錄
 fs.rmdirSync(chunkDir);
};

前端 & 服務(wù)端交互

前端分塊上傳

測(cè)試文件信息：

選擇文件類型為 19.8MB，而且上面設(shè)定默認(rèn)分塊大小為 5MB ，于是應(yīng)該要分成 4 個(gè)分塊，即 4 個(gè)請(qǐng)求。

服務(wù)端分塊接收

前端發(fā)送合并請(qǐng)求

服務(wù)端合并分塊

擴(kuò)展 —— 斷點(diǎn)續(xù)傳 & 秒傳

有了上面的核心邏輯之后，要實(shí)現(xiàn)斷點(diǎn)續(xù)傳和秒傳的功能，只需要在取擴(kuò)展即可，這里不再給出具體實(shí)現(xiàn)，只列出一些思路。

斷點(diǎn)續(xù)傳

斷點(diǎn)續(xù)傳其實(shí)就是讓請(qǐng)求可中斷，然后在接著上次中斷的位置繼續(xù)發(fā)送，此時(shí)要保存每個(gè)請(qǐng)求的實(shí)例對(duì)象，以便后期取消對(duì)應(yīng)請(qǐng)求，并將取消的請(qǐng)求保存或者記錄原始分塊列表取消位置信息等，以便后期重新發(fā)起請(qǐng)求。

取消請(qǐng)求的幾種方式

如果使用原生 XHR 可使用 (new XMLHttpRequest()).abort() 取消請(qǐng)求
如果使用 axios 可使用 new CancelToken(function (cancel) {}) 取消請(qǐng)求
如果使用 fetch 可使用 (new AbortController()).abort() 取消請(qǐng)求

秒傳

不要被這個(gè)名字給誤導(dǎo)了，其實(shí)所謂的秒傳就是不用傳，在正式發(fā)起上傳請(qǐng)求時(shí)，先發(fā)起一個(gè)檢查請(qǐng)求，這個(gè)請(qǐng)求會(huì)攜帶對(duì)應(yīng)的文件 hash 給服務(wù)端，服務(wù)端負(fù)責(zé)查找是否存在一模一樣的文件 hash，如果存在此時(shí)直接復(fù)用這個(gè)文件資源即可，不需要前端在發(fā)起額外的上傳請(qǐng)求。

最后

前端分片上傳的內(nèi)容單純從理論上來看其實(shí)還是容易理解的，但是實(shí)際自己去實(shí)現(xiàn)的時(shí)候還是會(huì)踩一些坑，比如服務(wù)端接收解析 formData 格式的數(shù)據(jù)時(shí)，沒法獲取文件的二進(jìn)制數(shù)據(jù)等。

網(wǎng)站標(biāo)題：大文件怎樣實(shí)現(xiàn)快速上傳？
標(biāo)題URL：http://fisionsoft.com.cn/article/dhgjcdj.html