Node.js斷點續傳的實現

阿新 • • 發佈：2021-05-25

前言

平常業務需求：上傳圖片、Excel等，畢竟幾M的大小可以很快就上傳到伺服器。
針對於上傳視訊等大檔案幾百M或者幾G的大小，就需要等待比較長的時間。

這就產生了對應的解決方法，對於大檔案上傳時的暫停、斷網、網路較差的情況下，使用切片+斷點續傳就能夠很好的應對上述的情況

方案分析

www.cppcns.com

切片

就是對上傳視訊進行切分，具體操作為：

File.slice(start,end)：返回新的blob物件

拷貝blob的起始位元組
拷貝blob的結束位元組

斷點續傳

每次切片上傳之前，請求伺服器介面，讀取相同檔案的已上傳切片數
上傳的是新檔案，服務端則返回0，否則返回已上傳切片數

具體解決流程

該demo提供關鍵點思路及方法，其他功能如：檔案限制，lastModifiedDate校驗檔案重複性，快取檔案定期清除等功能擴充套件都可以在此程式碼基礎上新增。

html

<input class="video" type="file" />
<button type="submit" onclick="handleVideo(event,'.video','video')">
    提交
</button>

script

let count = 0; // 記錄需要上傳的檔案下標
const handleVideo = async (event,name,url) => {
// 阻止瀏覽器預設表單事件
event.preventDefault();
let currentSize = document.querySelector("h2");
let files = document.querySelector(name).files;
// 預設切片數量
const sectionLength = 100;
// 首先請求介面，獲取伺服器是否存在此檔案
// count為0則是第一次上傳，count不為0則伺服器存在此檔案，返回已上傳的切片數
count = await handleCancel(files[0]);

// 申明存放切片的陣列物件
let fileCurrent = [];
// 迴圈file檔案物件
for (const file of [...files]) {
  // 得出每個切片的大小
  let itemSize = Math.ceil(file.size / sectionLength);
  // 迴圈檔案size，檔案blob存入陣列
  let current = 0;
  for (current; current < file.size; current += itemSize) {
    fileCurrent.push({ file: file.slice(current,current + itemSize) });
  }
  // axios模擬手動取消請求
  const CancelToken = axios.CancelToken;
  const source = CancelToken.source();
  // 當斷點續傳時，處理切片數量，已上傳切片則不需要再次請求上傳
  fileCurrent =
    count === 0 ? fileCurrent : fileCurrent.slice(count,sectionLength);
  // 迴圈切片請求介面
  for (const [index,item] of fileCurrent.entries()) {
    // 模擬請求暫停 || 網路斷開
    if (index > 90) {
      source.cancel("取消請求");
    }
    // 存入檔案相關資訊
    // file為切片blob物件
    // filename為檔名
    // index為當前切片數
    // total為總切片數
    let formData = new FormData();
    formData.append("file",item.file);
    formData.append("filename",file.name);
    formData.append("total",sectionLength);
    formData.append("index",index + count + 1);

    await axios({
      url: `http://localhost:8080/${url}`,method: "POST",data: formData,cancelToken: source.token,})
      .then((response) => {
        // 返回資料顯示進度
        currentSize.innerHTML = `進度${response.data.size}%`;
      })
      .catch((err) => {
        console.log(err);
      });
  }
}
};

// 請求介面，查詢上傳檔案是否存在
// count為0表示不存在，count不為0則已上傳對應切片數
const handleCancel = (file) => {
return axios({
  method: "post",url: "http://localhost:8080/getSize",headers: { "Contbuffy 
ent-Type": "application/json; charset = utf-8" },data: {
    fileName: file.name,},})
  .then((res) => {
    return res.data.count;
  })
  .catch((err) => {
    console.log(err);
  });
};

node服務端

// 使用express構建伺服器api
const express = require("express");
// 引入上傳檔案邏輯程式碼
const upload = require("./upload_file");
// 處理所有響應，設定跨域
app.all("*",(req,res,next) => {
  res.header("Access-Control-Allow-Origin","*");
  res.header("Access-Control-Allow-Headers","X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.headewww.cppcns.com 
r("Access-Control-Allow-Headers","Content-Type,X-Requested-With ");
  res.header("X-Powered-By"," 3.2.1");
  res.header("Content-Type","application/json;charset=utf-8");
  next();
});
const app = express();

app.use(bodyParser.json({ type: "application/*+json" }));
// 視訊上傳（查詢當前切片數）
app.post("/getSize",upload.getSize);
// 視訊上傳介面
app.post("/video",upload.video);

// 開啟本地埠偵聽
app.listen(8080);

upload_file

// 檔案上傳模組
const formidable = require("formidable");
// 檔案系統模組
const fs = require("fs");
// 系統路徑模組
const path = require("path");

// 操作寫入檔案流
const handleStream = (item,writeStream) => {
  // 讀取對應目錄檔案buffer
  const readFile = fs.readFileSync(item);
  // 將讀取的buffer || chunk寫入到stream中
  writeStream.write(readFile);
  // 寫入完後，清除暫存的切片檔案
  fs.unlink(item,() => {});
};

// 視訊上傳(切片)
module.exports.video = (req,res) => {
  // 建立解析物件
  const form = new formidable.IncomingForm();
  // 設定視訊檔案上傳路徑
  let dirPath = path.join(__dirname,"video");
  form.uploadDir = dirPath;
  // 是否保留上傳檔名字尾
  form.keepExtensions = true;
  // err 錯誤物件 如果解析失敗包含錯誤資訊
  // fields 包含除了二進位制以外的formData的key-value物件
  // file 物件型別 上傳檔案的資訊
  form.parse(req,async (err,fields,file) => {
    // 獲取上傳檔案blob物件
    let files = file.file;
    // 獲取當前切片index
    let index = fields.index;
    // 獲取總切片數
    let total = fields.total;
    // 獲取檔名
    let filename = fields.filename;
    // 重寫上傳檔名，設定暫存目錄
    let url =
      dirPath +
      "/" +
      filename.split(".")[0] +
      `_${index}.` +
      filename.split(".")[1];
    try {
      // 同步修改上傳檔名
      fs.renameSync(files.path,url);
      console.log(url);
      // 非同步處理
      setTimeout(() => {
        // 判斷是否是最後一個切片上傳完成，拼接寫入全部視訊
        if (index === total) {
          // 同步建立新目錄，用以存放完整視訊
          let newDir = _程式設計客棧_dirname + `/uploadFiles/${Date.now()}`;
          // 建立目錄
          fs.mkdirSync(newDir);
          // 建立可寫流，用以寫入檔案
          let writeStream = fs.createWriteStream(newDir + `/${filename}`);
          let fsList = [];
          // 取出所有切片檔案，放入陣列
          for (let i = 0; i < total; i++) {
            const fsUrl =
              dirPath +
              "/" +
              filename.split(".")[0] +
              `_${i + 1}.` +
              filename.split(".")[1];
            fsList.push(fsUrl);
          }
          // 迴圈切片檔案陣列，進行stream流的寫入
          for (let item of fsList) {
            handleStream(item,writeStream);
          }
          // 全部寫入，關閉stream寫入流
          writeStream.end();
        }
      },100);
    } catch (e) {
      console.log(e);
    }
    res.send({
      code: 0,msg: "上傳成功",size: index,});
  });
};

// 獲取檔案切片數
module.exports.getSize = (req,res) => {
  let count = 0;
  req.setEncoding("utf8");
  req.on("data",function (data) {
    let name = JSON.parse(data);
    let dirPath = path.join(__dirname,"video");
    // 計算已上傳的切片檔案個數
    let files = fs.readdirSync(dirPath);
    files.forEach((item,index) => {
      let url =
        name.fileName.split(".")[0] +
        `_${index + 1}.` +
        name.fileName.split(".")[1];
      if (files.includes(url)) {
        ++count;
      }
    });
    res.send({
      code: 0,msg: "請繼續上傳",count,});
  });
};