编程宝库 - 技术改变世界

编程宝库

Search

JS编程技术

详解Angular依赖注入

详解前端安全之JavaScript防http劫持与XSS

Node.js断点续传的实现

前言

平常业务需求：上传图片、Excel等，毕竟几M的大小可以很快就上传到服务器。
针对于上传视频等大文件几百M或者几G的大小，就需要等待比较长的时间。

这就产生了对应的解决方法，对于大文件上传时的暂停、断网、网络较差的情况下，使用切片+断点续传就能够很好的应对上述的情况

方案分析

切片

就是对上传视频进行切分，具体操作为：

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: { "Content-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.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,
  });
});
};