Node.js에서 중단점 재개를 구현하는 방법

이 글에서는 Node.js재개 가능한 업로드를 구현하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

일상 비즈니스 요구 사항: 사진, Excel 등 업로드. 결국 몇 M 크기도 서버에 빠르게 업로드할 수 있습니다.
동영상 및 기타 수백 M 또는 수 G 크기의 대용량 파일을 업로드하려면 오랜 시간을 기다려야 합니다.
이로 인해 대용량 파일을 업로드할 때 pause, 인터넷 연결 끊김 및 네트워크 불량의 경우 slicing+breakpoint 이력서을 사용하면 위의 상황을 처리하는 데 매우 유용할 수 있습니다. 솔루션 분석

슬라이싱

• 은 업로드된 비디오를 분할하는 것입니다. 구체적인 작업은 다음과 같습니다.

  File.slice(start, end): 새 blob 객체 반환
  • blob 시작 바이트
  • 복사 blob의 끝 바이트
  재개 가능한 업로드

• 각 슬라이스가 업로드되기 전에 서버 인터페이스에 동일한 파일의 업로드된 슬라이스 수를 읽도록 요청하세요

  업로드됨 새 파일인 경우 서버는 0을 반환하고 그렇지 않으면 업로드된 슬라이스 수를 반환합니다
  [권장 학습: "
nodejs tutorial

"]

특정 솔루션 프로세스

이 데모는 핵심 아이디어와 방법, 기타 기능을 제공합니다. : 파일 제한

,

lastModifiedDate 확인 파일 중복, 캐시 파일 정기 삭제 등의 기능 확장이 이 코드를 기반으로 추가될 수 있습니다. 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);
  });
};

노드 서버

// 使用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부터 시작됩니다
  • 파일에 해당 슬라이스가 이미 있으면 업로드 요청은 0부터 시작됩니다. Slices
    • 슬라이스 배열을 반복하고 각 슬라이스 파일을 수행합니다. Upload
  시뮬레이션된 수동 일시 중지 요청이 사용됩니다. 슬라이스 수가 90개보다 많으면 요청이 취소됩니다
  서버
쿼리 파일의 파일명을 받아 임시 저장된 파일 주소를 검색하여 해당 업로드 파일이 있는지 확인합니다
• Never 이 파일이 업로드된 경우 0이 반환되고 슬라이스 수는 0부터 시작됩니다.
  • • 업로드된 파일 슬라이스를 수신하면 파일은
    • count
    및
    total
  을 통해 임시 저장 디렉터리
  • 에 저장됩니다.
    • 업로드가 완료된 후 파일 저장 디렉터리를 만들고, 쓰기 가능한 스트림을 만들고, 쓰기 작업을 수행합니다.해당 임시 파일을 추출하여 배열에 넣고, 파일 디렉터리 배열을 반복하고, 파일 버퍼를 읽고 씁니다. 시퀀스
    쓰기가 완료된 후 쓰기 가능한 스트림을 닫습니다.
  요약

위 코드는 특정 비즈니스 프로세스의 변경 또는 편차를 포함합니다. 이는 특정 구현 방법 중 하나일 뿐입니다.

이 기사가 모든 사람에게 도움이 되기를 바랍니다. 글에 잘못된 점이 있으면 지적해 주시기 바랍니다.

위 코드 주소: https://github.com/Surprise-ling/uploadFile

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오
• 를 방문하세요! !

위 내용은 Node.js에서 중단점 재개를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!