自己的切片+断点续传

前端

2024-01-24 13:32:23

大文件传输的利器：切片上传和断点续传详解

简介

在当今的大数据时代，处理和传输大文件已成为一项普遍的需求。为应对这一挑战，切片上传和断点续传技术应运而生。它们协同作用，通过优化数据传输过程，极大地提升了大文件传输的效率和可靠性。

切片上传：分而治之

切片上传的原理很简单：它将大文件分解成较小的、可管理的块，然后并发上传这些块。通过充分利用多个网络连接，这种方法显著提高了整体上传速度。

HTTP 协议为切片上传提供了分块传输机制。客户端将文件分块，并在每个分块请求中指定其范围。服务器接收这些分块并将其存储在临时文件中。当所有分块都接收完毕，服务器将它们合并成一个完整的文件。

代码示例：客户端使用分块传输上传文件

const file = new File(['Hello, world!'], 'test.txt', {
  type: 'text/plain'
});

const formData = new FormData();
formData.append('file', file);

fetch('/upload', {
  method: 'POST',
  body: formData
})
  .then(response => {
    if (response.ok) {
      console.log('File uploaded successfully!');
    } else {
      console.error('Error uploading file.');
    }
  })
  .catch(error => {
    console.error('Error uploading file: ', error);
  });

断点续传：无缝衔接

断点续传解决了文件传输过程中网络中断的难题。它允许从中断点继续传输，而无需重新发送整个文件。

HTTP 协议通过 Range 头字段实现了断点续传。客户端指定要传输的文件范围，服务器从该范围的起始字节开始传输。

代码示例：客户端使用断点续传下载文件

const range = 'bytes=0-4';

fetch('/download', {
  method: 'GET',
  headers: {
    'Range': range
  }
})
  .then(response => {
    if (response.ok) {
      console.log('Partial file downloaded successfully!');
    } else {
      console.error('Error downloading file.');
    }
  })
  .catch(error => {
    console.error('Error downloading file: ', error);
  });

服务器端处理：协调流程

服务器端代码负责处理客户端的切片上传和断点续传请求。对于切片上传，服务器存储分块数据，并在所有分块接收完毕后合并它们。对于断点续传，服务器确定传输范围并从指定位置开始发送文件。

代码示例：服务器端使用 Express.js 处理分块上传

const express = require('express');
const multer = require('multer');

const upload = multer({ storage: multer.memoryStorage() });

const app = express();

app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  // 处理分块数据并合并文件...
});