大文件的断点续传如何实现

断点续传

????????断点续传是一种数据恢复技术，主要用于在读取或发送数据时，因为网络问题、磁盘问题等原因导致数据传输中断。断点续传技术允许你在已经传输的数据基础上继续传输，从而节省数据传输时间。

????????断点续传通常用于文件传输过程中，当传输中断时，可以基于已传输的数据继续传输，从而提高文件传输的效率。例如，在下载文件时，如果下载中断，你可以从已经下载的文件中继续下载。

????????断点续传通常由两部分组成：服务器端（或文件服务器）记录已发送的数据块信息（即断点信息）以及客户端（或文件客户端）根据服务器端的断点信息继续发送数据。

核心思路代码

前端：

// 选择文件并上传
function uploadFile(file) {
  const chunkSize = 1024 * 1024 // 每个分块的大小，这里设定为1MB
  const totalChunks = Math.ceil(file.size / chunkSize) // 总分块数
  let currentChunk = 0 // 当前上传的分块索引

  // 逐个上传分块
  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('file', chunk)
    formData.append('totalChunks', totalChunks)
    formData.append('currentChunk', currentChunk)

    // 发送分块数据到后端
    fetch('/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => {
      if (response.ok) {
        // 分块上传成功，继续上传下一个分块
        currentChunk++
        if (currentChunk < totalChunks) {
          uploadChunk()
        } else {
          console.log('文件上传完成')
        }
      } else {
        console.error('分块上传失败')
      }
    })
    .catch(error => {
      console.error('网络错误', error)
    })
  }

  // 开始上传
  uploadChunk()
}

// 选择文件并触发上传
const fileInput = document.getElementById('fileInput')
fileInput.addEventListener('change', () => {
  const file = fileInput.files[0]
  if (file) {
    uploadFile(file)
  }
})

后端：

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

const app = express()
const upload = multer({ dest: 'uploads/' })

app.post('/upload', upload.single('file'), (req, res) => {
  const { file, body: { totalChunks, currentChunk } } = req

  // 根据totalChunks和currentChunk处理分块上传的逻辑
  // 这里可以将分块数据保存到磁盘或云存储中，并记录已上传的分块信息

  if (currentChunk == totalChunks - 1) {
    // 最后一个分块上传完成，表示整个文件上传完成
    console.log('文件上传完成')
  }

  res.sendStatus(200)
})

app.listen(3000, () => {
  console.log('服务器已启动')
})