Vue3 怎么合并多个Range请求头获取的文件块

Vue3 本身并没有提供合并多个 Range 请求头获取的文件块的方法，这需要在后端进行处理。一种常见的做法是在后端将多个 Range 请求头合并成一个请求，然后返回一个连续的文件块。如果你使用的是 Node.js 作为后端，你可以使用 `range-parser` 这个库来完成这个功能。该库可以帮助你解析 Range 请求头，并将多个请求头合并成一个请求。以下是一个示例代码：

const rangeParser = require('range-parser');
const fs = require('fs');

const filePath = 'path/to/file';
const fileStat = fs.statSync(filePath);

const rangeHeader = req.headers.range;
const ranges = rangeParser(fileStat.size, rangeHeader);

if (ranges === -1) {
  // 无效的 Range 请求头
  return res.status(400).end();
}

if (ranges === -2) {
  // 未指定 Range 请求头
  res.set({
    'Content-Length': fileStat.size,
    'Content-Type': 'video/mp4'
  });
  return fs.createReadStream(filePath).pipe(res);
}

if (ranges.length === 1) {
  // 单个 Range 请求头
  const range = ranges[0];
  res.status(206);
  res.set({
    'Content-Range': `bytes ${range.start}-${range.end}/${fileStat.size}`,
    'Content-Length': range.end - range.start + 1,
    'Content-Type': 'video/mp4'
  });
  return fs.createReadStream(filePath, { start: range.start, end: range.end }).pipe(res);
}

// 多个 Range 请求头
res.status(206);
res.set({
  'Content-Type': 'multipart/byteranges; boundary=3d6b6a416f9b5',
  'Content-Length': ranges.reduce((total, range) => {
    return total + `--3d6b6a416f9b5\r\nContent-Type: video/mp4\r\nContent-Range: bytes ${range.start}-${range.end}/${fileStat.size}\r\n\r\n`.length + (range.end - range.start + 1);
  }, 0)
});

res.write('--3d6b6a416f9b5\r\nContent-Type: video/mp4\r\nContent-Range: bytes ' + ranges[0].start + '-' + ranges[0].end + '/' + fileStat.size + '\r\n\r\n');
fs.createReadStream(filePath, { start: ranges[0].start, end: ranges[0].end }).pipe(res, { end: false });

for (let i = 1; i < ranges.length; i++) {
  res.write('\r\n--3d6b6a416f9b5\r\nContent-Type: video/mp4\r\nContent-Range: bytes ' + ranges[i].start + '-' + ranges[i].end + '/' + fileStat.size + '\r\n\r\n');
  fs.createReadStream(filePath, { start: ranges[i].start, end: ranges[i].end }).pipe(res, { end: false });
}

res.end('\r\n--3d6b6a416f9b5--\r\n');

这段代码做了以下几件事情：

1. 使用 `range-parser` 库解析 Range 请求头，如果请求头无效或未指定 Range，则返回整个文件。
2. 如果请求头只有一个 Range，则返回对应的文件块。
3. 如果请求头有多个 Range，则返回多个文件块，并使用 `multipart/byteranges` 类型的响应头进行分隔。