前端大文件分片上传与后台合并的原理及实现

前端

2023-10-19 23:58:17

大文件分片上传：优化上传速度和可靠性的终极指南

分片上传：原理与优势

在现代网络应用中，大文件上传是不可避免的，但传统的上载方法效率低下，易出错。分片上传应运而生，它将大文件切成较小的片段，分批上载。这一技术显著提升了上传速度，降低了失败率。

前端实现：分步指南

前端实现分片上传时，可以使用 HTML5 文件 API 和 XMLHttpRequest。HTML5 文件 API 允许访问本地文件系统，而 XMLHttpRequest 负责与服务器通信。

以下步骤详解了前端分片上传过程：

将文件切割成固定大小的片段。
为每个片段创建 XMLHttpRequest 对象，并附带片段索引和总片段数。
发送每个片段作为单独的请求。
循环上述步骤直至所有片段传输完毕。

代码示例：

const file = document.getElementById('file').files[0];
const chunkSize = 1024 * 1024; // 1MB
const chunks = Math.ceil(file.size / chunkSize);
let currentChunk = 0;

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');

xhr.onload = function() {
  if (xhr.status === 200) {
    // 上传成功
  } else {
    // 上传失败
  }
};

function uploadChunk() {
  const start = currentChunk * chunkSize;
  const end = Math.min(start + chunkSize, file.size);
  const chunk = file.slice(start, end);

  const formData = new FormData();
  formData.append('chunk', chunk);
  formData.append('chunkIndex', currentChunk);
  formData.append('totalChunks', chunks);

  xhr.send(formData);

  currentChunk++;

  if (currentChunk < chunks) {
    setTimeout(uploadChunk, 100); // 延迟 100 毫秒再上传下一个片段
  }
}

uploadChunk();

后端实现：接受和合并

后端处理分片上传时，可以使用 Node.js、Koa2 或 Express 等框架。

以下步骤详解了后端分片上传处理过程：

接收并保存每个上传的片段。
跟踪已接收的片段数量和总片段数。
当所有片段都收到后，将它们合并成一个完整的文件。

代码示例：

const multer = require('multer');

const storage = multer.diskStorage({
  destination: 'uploads/',
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now());
  }
});

const upload = multer({ storage });

app.post('/upload', upload.single('file'), async (req, res) => {
  const file = req.file;
  // ... 保存文件及跟踪已接收片段数量

  // 所有片段都收到后合并文件
  if (// 所有片段都收到) {
    // ... 合并文件
  }

  res.send({ success: true, message: '文件上传成功' });
});