web前端Tips：断点续传如何实现？

news2024/10/7 14:33:15

输入图片描述

在Web前端中实现断点续传功能的一种常见方式是使用HTTP Range请求和文件分片上传。

以下是一个简单的断点续传实现的步骤：

前端将要上传的文件分成多个固定大小的片段（chunk），例如每个片段的大小为1MB。
当用户选择上传文件时，前端发送一个初始请求到服务器，询问服务器当前已上传的文件大小（如果之前有上传过该文件）。
服务器通过响应返回已上传的文件大小给前端。
前端根据服务器返回的已上传文件大小，计算出还需要上传的文件片段。
前端使用File API的slice方法将剩余的文件分片进行上传。同时，在每次上传片段时，设置HTTP请求的Range头部，指示上传的起始位置。
服务器接收到文件片段后，根据Range头部确定文件的上传位置，并将数据追加到对应的位置上。
重复步骤5-6，直到所有文件片段都上传完成。
可选：前端可以在每次上传完一个片段后，更新进度条或显示上传进度。

需要注意的是，服务器端也需要相应的逻辑来处理断点续传的请求，并将上传的文件片段正确拼接到最终的文件中。

以上是一个基本的断点续传的实现思路，具体的代码实现可能会因具体的技术框架和需求而有所不同。

具体代码如何实现

以下是一个基于JavaScript和Node.js的简单示例：

前端代码（使用Fetch API）：

const uploadFile = async (file) => {
  const CHUNK_SIZE = 1 * 1024 * 1024; // 1MB

  let start = 0;
  let end = Math.min(CHUNK_SIZE, file.size);

  while (start < file.size) {
    const chunk = file.slice(start, end);
    const formData = new FormData();
    formData.append('file', chunk);

    await fetch('/upload', {
      method: 'POST',
      body: formData,
      headers: {
        'Content-Range': `bytes ${start}-${end - 1}/${file.size}`,
      },
    });

    start = end;
    end = Math.min(start + CHUNK_SIZE, file.size);
  }

  console.log('Upload complete');
};

const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  uploadFile(file);
});

后端代码（使用Express.js）：

app.post('/upload', (req, res) => {
  const rangeHeader = req.headers['content-range'];
  const fileSize = parseInt(rangeHeader.split('/')[1]);
  const [start, end] = rangeHeader.replace(/bytes=([0-9]+)-([0-9]+)/, '$1-$2').split('-');

  // 在此处处理文件上传逻辑，将接收到的文件片段追加到最终文件中
  // 例如，可以使用fs模块将片段写入磁盘上的文件

  res.sendStatus(200);
});