Comment implémenter la reprise du point d'arrêt dans Node.js

Cet article vous présentera comment implémenter le transfert de reprise du point d'arrêt Node.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Besoins professionnels habituels : télécharger des images, Excel, etc. Après tout, la taille de quelques M peut être téléchargée au serveur rapidement.
Pour télécharger des fichiers volumineux tels que des vidéos, qui font des centaines de M ou plusieurs G, vous devez attendre longtemps.
Cela a produit des solutions correspondantes. Pour pause lors du téléchargement de fichiers volumineux, déconnexion, mauvais réseau, utilisez Slicing+La reprise du point d'arrêt peut très bien gérer la situation ci-dessus

L'analyse du programme

• Le découpage

  • est pour segmenter la vidéo téléchargée. L'opération spécifique est la suivante :
  • File.slice(start,end) : renvoie un nouvel objet blob
    • Copiez l'octet de début du blob
    • Copiez l'octet de fin du blob

• Reprendre le point d'arrêt

  • Avant que chaque tranche ne soit téléchargée, demandez à l'interface du serveur de lire le nombre de tranches téléchargées du même fichier
  • Si un nouveau fichier est téléchargé, le serveur renverra 0, sinon il renverra le nombre de tranches téléchargées

[Apprentissage recommandé : "Tutoriel Nodejs"]

Processus de solution spécifique

Cette démo fournit des points clés, des idées et des méthodes, d'autres des fonctions telles que : Limite de fichiers, répétabilité du fichier de vérification lastModifiedDate, Effacement régulier du fichier cache et d'autres extensions fonctionnelles peuvent être ajoutées dans ce code ajouté en fonction.

• html

<input class="video" type="file" />
<button type="submit" onclick="handleVideo(event, &#39;.video&#39;, &#39;video&#39;)">
    提交
</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: { "Content-Type": "application/json; charset = utf-8" },
  data: {
    fileName: file.name,
  },
})
  .then((res) => {
    return res.data.count;
  })
  .catch((err) => {
    console.log(err);
  });
};

• serveur de nœuds

// 使用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.header("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,
    });
  });
};

Analyse logique

• Front-end
  • Première demande s'il faut télécharger le fichier de requête Le premier téléchargement, ou la tranche correspondante existe déjà
    • La première fois que le fichier est téléchargé, les tranches commenceront à 0
    • Le fichier a déjà la tranche correspondante, la demande de téléchargement va commencer à partir du nombre de tranches
  • Parcourez le tableau de tranches et téléchargez chaque fichier de tranche
    • Une demande de pause manuelle simulée est utilisée, et lorsque le nombre de tranches est supérieur supérieur à 90, la demande est annulée
• Le serveur
  • reçoit le nom de fichier du fichier de requête, recherche l'adresse du fichier temporairement stocké et détermine si il y a un fichier téléchargé correspondant
    • Ce fichier n'a jamais été téléchargé, alors Renvoyez 0, le nombre de tranches commence à 0
    • Si le fichier a été téléchargé, le nombre de tranches correspondant sera renvoyé
  • Recevez les tranches de fichiers téléchargées et stockez les fichiers dans le répertoire de stockage temporaire
    • Utilisez count et total pour déterminer si la tranche a été téléchargée
    • Une fois le téléchargement terminé, créez un répertoire de stockage de fichiers et créez un flux inscriptible pour l'écriture
    • Extrayez les fichiers temporaires correspondants dans le tableau, bouclez le fichier tableau de répertoires, lisez et écrivez le tampon de fichier dans l'ordre
    • Une fois l'écriture terminée, fermez le flux inscriptible.

Résumé

Le code ci-dessus implique des changements ou des écarts dans des processus métier spécifiques. Ce n'en est qu'un. des modalités spécifiques de mise en œuvre.
J'espère que cet article pourra être utile à tout le monde. S'il y a quelque chose qui ne va pas dans l'écriture, j'espère que vous pourrez me donner quelques conseils.

• L'adresse du code ci-dessus : https://github.com/Surprise-ling/uploadFile

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!