当前位置：首页 > VUE

断点续传实现vue

2026-02-22 12:15:49VUE

断点续传的实现原理

断点续传的核心在于将大文件分割为多个小块，上传时记录已上传的部分。若上传中断，再次上传时跳过已完成的块，仅上传未完成的部分。前端需配合后端接口实现分块上传、校验和合并。

前端实现步骤

文件分块处理 使用File对象的slice方法将文件切割为固定大小的块（如1MB）：

function createFileChunks(file, chunkSize = 1024 * 1024) {
  const chunks = []
  let cur = 0
  while (cur < file.size) {
    chunks.push(file.slice(cur, cur + chunkSize))
    cur += chunkSize
  }
  return chunks
}

计算文件哈希值 使用SparkMD5等库生成文件唯一标识，用于服务端校验：

断点续传实现vue

import SparkMD5 from 'spark-md5'
function calculateHash(file) {
  return new Promise(resolve => {
    const spark = new SparkMD5.ArrayBuffer()
    const reader = new FileReader()
    reader.onload = e => {
      spark.append(e.target.result)
      resolve(spark.end())
    }
    reader.readAsArrayBuffer(file)
  })
}

上传控制逻辑 通过axios发送分块，记录成功上传的块索引：

async function uploadChunks(chunks, hash) {
  const uploadedList = await checkServerChunks(hash) // 查询已上传的块
  const requests = chunks.map((chunk, index) => {
    if (uploadedList.includes(index)) return Promise.resolve()
    const formData = new FormData()
    formData.append('chunk', chunk)
    formData.append('hash', hash)
    formData.append('index', index)
    return axios.post('/upload', formData)
  })
  await Promise.all(requests)
  await mergeRequest(hash) // 通知服务端合并文件
}

服务端配合要点

接口设计

断点续传实现vue

POST /check-chunks：接收文件哈希，返回已上传的块索引列表
POST /upload：接收分块数据、哈希值和索引
POST /merge：触发文件合并操作

目录结构示例

temp_uploads/
  ├── {fileHash}_0.chunk
  ├── {fileHash}_1.chunk
uploads/
  ├── merged_files

进度显示实现

使用axios的onUploadProgress回调更新进度：

const progress = ref(0)
axios.post('/upload', formData, {
  onUploadProgress: e => {
    progress.value = Math.round((e.loaded / e.total) * 100)
  }
})

完整组件示例

<template>
  <input type="file" @change="handleFileChange">
  <button @click="handleUpload">上传</button>
  <div>进度: {{ progress }}%</div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const file = ref(null)
const progress = ref(0)

const handleFileChange = (e) => {
  file.value = e.target.files[0]
}

const handleUpload = async () => {
  if (!file.value) return
  const chunks = createFileChunks(file.value)
  const hash = await calculateHash(file.value)
  await uploadChunks(chunks, hash)
}
</script>