Node.js でブレークポイント再開を実装する方法

この記事では、Node.jsの実装方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

通常のビジネス ニーズ: 写真、Excel などをアップロードします。結局のところ、アップロードできるサイズは数 M です。すぐにサーバーに送信します。
videos や数百 M から数 G のサイズの大きなファイルをアップロードする場合、長時間待つ必要があります。
これにより、対応する解決策が生成されます。大きなファイルをアップロードするときに、一時停止、ネットワーク切断、貧弱なネットワークの状況の場合は、使用スライス ブレークポイント再開転送は上記の状況に非常にうまく対処できます

プログラム分析

• スライス

  • アップロードされたビデオをセグメント化することです。具体的な操作は次のとおりです:
  • File.slice(start,end): 新しい blob オブジェクトを返します
    • Copy blob の開始バイト
    • BLOB の終了バイトをコピーします
• #再開可能な転送
  #各スライスをアップロードする前に、サーバー インターフェイスを要求します同じファイルのアップロードされたスライスの数を読み取ります
  #新しいファイルがアップロードされた場合、サーバーは 0 を返します。それ以外の場合は、アップロードされたスライスの数を返します
  [推奨学習: 「
nodejs チュートリアル

」]

具体的なソリューション プロセス

このデモでは、いくつかのアイデアや方法、その他の重要な情報を提供します。 ファイル制限

、

lastModifiedDate検証ファイルの再現性、キャッシュファイルの定期クリアなどの機能やその他の機能拡張は、このコードに基づいて行うことができます。 html

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

スクリプト

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

ノード サーバー

// 使用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,
      });
    });
  };

  論理分析

クエリ ファイルをアップロードするための最初のリクエスト 最初のアップロード、または対応するスライスはすでに存在します

初めてファイルをアップロードするとき、スライスは 0 から始まります
• ファイルに対応するスライスがすでに存在する場合、アップロード リクエストはスライスの数から始まります
  • • スライス配列をループして各スライス ファイルをアップロードします
    • #シミュレートされた手動一時停止リクエストが使用され、スライスの数が 90 を超えるとリクエストはキャンセルされます
  • • サーバー
  クエリ ファイルのファイル名を受信し、一時的に保存されているファイル アドレスを検索し、対応するアップロード ファイルがあるかどうかを判断します
このファイルはアップロードされていないため、0 を返します。スライスの数は 0 から始まります。
• ファイルがアップロードされている場合は、対応するスライス数が返されます
  • • ##アップロードされたファイルスライスを受信し、ファイルを一時保存ディレクトリに保存します
    • スライスがアップロードされたかどうかを
    count
    と
  total
  • ## で判断します
    #アップロードが完了したら、ファイル ストレージ ディレクトリを作成し、書き込み操作用の書き込み可能なストリームを作成します
    • 対応する一時ファイルを配列に抽出し、ファイル ディレクトリ配列をループし、ファイルの読み取りと書き込みを行います。シーケンス内のバッファ書き込みが完了したら、書き込み可能なストリームを閉じます。
    • 概要
  上記のコードには、特定のビジネス プロセスの変更または逸脱が含まれています。具体的な実装方法。
この記事が皆様のお役に立てれば幸いです、文章に間違いがあれば指摘させていただきたいと思います。

上記のコードのアドレス: https://github.com/Surprise-ling/uploadFile

プログラミング関連の知識の詳細については、次のサイトを参照してください:
プログラミングビデオ＃ ＃＃！ ！

以上がNode.js でブレークポイント再開を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。