Vue3大文件分片上传组件开发指南-代码聚汇网

Vue3大文件分片上传组件开发指南

Vue3大文件上传分片上传

|难度：普通|阅读约 27 分钟

1. 为什么我们需要专门的大文件上传组件

在Web开发中，文件上传是一个常见需求，但当文件体积超过100MB时，传统的表单上传方式就会暴露出诸多问题。我曾在实际项目中遇到过用户上传500MB设计稿导致整个页面卡死的尴尬情况，这促使我深入研究大文件上传的解决方案。

传统上传方式的主要痛点在于：

网络不稳定时容易中断，用户需要重新上传整个文件
服务器内存压力大，PHP等语言默认配置可能直接拒绝大文件
无法实时显示上传进度，用户体验差
重复上传相同文件浪费服务器存储空间

分片上传技术将大文件切割成多个小块（如5MB一片），通过以下机制解决上述问题：

断点续传：记录已上传分片，网络恢复后继续上传剩余部分
并行上传：同时上传多个分片提高整体速度
秒传机制：通过文件指纹识别重复内容
进度监控：精确到每个分片的上传状态

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 技术选型与基础环境搭建

2.1 Vue3 + Element Plus的组合优势

选择Vue3作为基础框架主要考虑其：

Composition API更适合封装复杂上传逻辑
更好的TypeScript支持
更小的运行时体积

Element Plus作为UI库提供：

Upload组件基础样式和交互
完善的进度条、提示等反馈组件
与Vue3完美兼容的版本

2.2 核心依赖安装

bash复制npm install vue@next element-plus axios spark-md5

关键依赖说明：

axios：处理分片上传的HTTP请求
spark-md5：计算文件MD5实现秒传功能
element-plus：提供UI组件基础

2.3 初始化上传组件

创建BigFileUpload.vue基础结构：

vue复制<template>
  <el-upload
    class="big-upload"
    drag
    :auto-upload="false"
    :on-change="handleFileChange"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
      将文件拖到此处或<em>点击选择</em>
    </div>
  </el-upload>
</template>

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

const handleFileChange = (file) => {
  console.log('选中文件:', file)
}
</script>

3. 分片上传核心实现

3.1 文件分片算法设计

分片策略需要考虑：

分片大小平衡（通常2-5MB）
最后一片的余数处理
分片序号生成规则

javascript复制const CHUNK_SIZE = 5 * 1024 * 1024 // 5MB

const createFileChunks = (file) => {
  const chunks = []
  let cur = 0
  while (cur < file.size) {
    chunks.push({
      index: cur,
      file: file.slice(cur, cur + CHUNK_SIZE)
    })
    cur += CHUNK_SIZE
  }
  return chunks
}

3.2 文件指纹计算

使用SparkMD5计算文件唯一标识：

javascript复制import SparkMD5 from 'spark-md5'

const calculateFileHash = (file) => {
  return new Promise((resolve) => {
    const spark = new SparkMD5.ArrayBuffer()
    const reader = new FileReader()
    const chunkSize = 2 * 1024 * 1024 // 2MB采样
    let cur = 0
    
    const loadNext = () => {
      const end = Math.min(cur + chunkSize, file.size)
      reader.readAsArrayBuffer(file.slice(cur, end))
    }
    
    reader.onload = (e) => {
      spark.append(e.target.result)
      cur += chunkSize
      cur < file.size ? loadNext() : resolve(spark.end())
    }
    
    loadNext()
  })
}

3.3 上传队列控制

避免浏览器并发请求过多：

javascript复制const MAX_CONCURRENT = 3 // 最大并发数
const uploadQueue = []
let activeUploads = 0

const processQueue = () => {
  while (activeUploads < MAX_CONCURRENT && uploadQueue.length) {
    const task = uploadQueue.shift()
    activeUploads++
    task().finally(() => {
      activeUploads--
      processQueue()
    })
  }
}

const enqueueUpload = (task) => {
  uploadQueue.push(task)
  processQueue()
}

4. 断点续传与秒传实现

4.1 服务端接口设计

需要三个核心接口：

检查接口（检查文件是否存在）

javascript复制POST /api/upload/check
{
  "hash": "文件MD5",
  "name": "文件名"
}

分片上传接口

javascript复制POST /api/upload/chunk
{
  "hash": "文件MD5",
  "index": "分片序号",
  "chunk": "分片二进制数据"
}

合并接口

javascript复制POST /api/upload/merge
{
  "hash": "文件MD5",
  "name": "文件名",
  "total": "总分片数"
}

4.2 前端断点续传逻辑

javascript复制const checkFileExist = async (hash, name) => {
  const { data } = await axios.post('/api/upload/check', {
    hash,
    name
  })
  return data.data
}

const handleUpload = async (file) => {
  const hash = await calculateFileHash(file)
  const { shouldUpload, uploadedChunks } = await checkFileExist(hash, file.name)
  
  if (!shouldUpload) {
    // 秒传逻辑
    return ElMessage.success('文件秒传成功')
  }
  
  const chunks = createFileChunks(file)
  chunks.forEach((chunk, index) => {
    if (uploadedChunks.includes(index)) return
    
    enqueueUpload(async () => {
      const formData = new FormData()
      formData.append('hash', hash)
      formData.append('index', index)
      formData.append('chunk', chunk.file)
      
      await axios.post('/api/upload/chunk', formData, {
        onUploadProgress: (e) => {
          // 更新进度条
        }
      })
    })
  })
  
  // 所有分片上传完成后调用合并
  await axios.post('/api/upload/merge', {
    hash,
    name: file.name,
    total: chunks.length
  })
}

5. 完整组件实现与优化

5.1 组件完整代码结构

vue复制<template>
  <div class="big-upload-container">
    <el-upload
      drag
      :auto-upload="false"
      :on-change="handleFileChange"
      :show-file-list="false"
    >
      <!-- 上传区域UI -->
    </el-upload>
    
    <div v-if="file" class="upload-details">
      <div class="file-info">
        <span>{{ file.name }}</span>
        <span>{{ (file.size / 1024 / 1024).toFixed(2) }}MB</span>
      </div>
      
      <el-progress 
        :percentage="progressPercent" 
        :status="uploadStatus"
      />
      
      <div class="upload-actions">
        <el-button 
          v-if="!isUploading"
          type="primary"
          @click="startUpload"
        >
          开始上传
        </el-button>
        <el-button 
          v-else
          @click="pauseUpload"
        >
          暂停上传
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SparkMD5 from 'spark-md5'
import axios from 'axios'

// 组件状态和数据
const file = ref(null)
const isUploading = ref(false)
const progressPercent = ref(0)
const uploadStatus = ref('')

// 上传控制逻辑
const startUpload = async () => {
  // 实现上传逻辑
}

const pauseUpload = () => {
  // 实现暂停逻辑
}

const handleFileChange = (uploadFile) => {
  file.value = uploadFile
}
</script>

5.2 上传进度计算优化

精确计算整体进度：

javascript复制const chunkProgress = ref({})
const totalChunks = ref(0)

const updateProgress = () => {
  const loaded = Object.values(chunkProgress.value).reduce((sum, p) => sum + p, 0)
  progressPercent.value = Math.round((loaded / totalChunks.value) * 100)
}

// 在每个分片上传进度回调中
onUploadProgress: (e) => {
  chunkProgress.value[index] = e.loaded / e.total
  updateProgress()
}

5.3 错误处理与重试机制

javascript复制const retryCount = ref({})

const uploadChunk = async (chunk, index, hash) => {
  try {
    const formData = new FormData()
    // ...准备formData
    
    await axios.post('/api/upload/chunk', formData, {
      onUploadProgress: (e) => {
        // 更新进度
      },
      timeout: 30000
    })
    
    delete retryCount.value[index]
  } catch (error) {
    if (!retryCount.value[index]) {
      retryCount.value[index] = 0
    }
    
    if (retryCount.value[index] < 3) {
      retryCount.value[index]++
      await new Promise(resolve => setTimeout(resolve, 1000))
      return uploadChunk(chunk, index, hash)
    } else {
      uploadStatus.value = 'exception'
      throw new Error(`分片${index}上传失败`)
    }
  }
}

6. 服务端关键实现（Node.js示例）

6.1 文件检查接口

javascript复制router.post('/check', async (ctx) => {
  const { hash, name } = ctx.request.body
  const chunkDir = path.join(UPLOAD_DIR, hash)
  
  // 检查是否已存在完整文件
  const filePath = path.join(UPLOAD_DIR, name)
  if (fs.existsSync(filePath)) {
    return ctx.body = { 
      data: { 
        shouldUpload: false,
        uploadedChunks: []
      }
    }
  }
  
  // 检查已上传分片
  const uploadedChunks = fs.existsSync(chunkDir) 
    ? fs.readdirSync(chunkDir).map(Number)
    : []
    
  ctx.body = {
    data: {
      shouldUpload: true,
      uploadedChunks
    }
  }
})

6.2 分片上传接口

javascript复制router.post('/chunk', async (ctx) => {
  const { hash, index } = ctx.request.body
  const chunk = ctx.request.files.chunk
  const chunkDir = path.join(UPLOAD_DIR, hash)
  
  if (!fs.existsSync(chunkDir)) {
    fs.mkdirSync(chunkDir)
  }
  
  await fs.promises.rename(
    chunk.path,
    path.join(chunkDir, index)
  )
  
  ctx.body = { success: true }
})

6.3 分片合并接口

javascript复制router.post('/merge', async (ctx) => {
  const { hash, name, total } = ctx.request.body
  const chunkDir = path.join(UPLOAD_DIR, hash)
  const filePath = path.join(UPLOAD_DIR, name)
  
  // 检查分片是否完整
  const chunks = fs.readdirSync(chunkDir)
  if (chunks.length !== total) {
    ctx.status = 400
    return ctx.body = { error: '分片数量不完整' }
  }
  
  // 按序号排序分片
  chunks.sort((a, b) => a - b)
  
  // 合并分片
  await Promise.all(
    chunks.map((chunk, index) => {
      return new Promise((resolve) => {
        const reader = fs.createReadStream(path.join(chunkDir, chunk))
        const writer = fs.createWriteStream(filePath, { 
          flags: index ? 'a' : 'w' 
        })
        
        reader.pipe(writer).on('finish', resolve)
      })
    })
  )
  
  // 删除临时分片目录
  fs.rmdirSync(chunkDir, { recursive: true })
  
  ctx.body = { success: true }
})

7. 高级功能扩展

7.1 上传暂停与恢复

javascript复制const activeRequests = ref([])

const pauseUpload = () => {
  activeRequests.value.forEach(request => {
    request.abort()
  })
  activeRequests.value = []
  isUploading.value = false
}

// 在上传请求时保存引用
const controller = new AbortController()
activeRequests.value.push(controller)

await axios.post('/api/upload/chunk', formData, {
  signal: controller.signal
  // ...其他配置
})

7.2 上传速度计算与预估

javascript复制const uploadSpeed = ref('0 KB/s')
const remainingTime = ref('--')

let lastLoaded = 0
let lastTime = Date.now()

const calculateSpeed = (loaded) => {
  const now = Date.now()
  const duration = (now - lastTime) / 1000 // 秒
  const bytesPerSecond = (loaded - lastLoaded) / duration
  
  lastLoaded = loaded
  lastTime = now
  
  if (bytesPerSecond < 1024) {
    uploadSpeed.value = `${bytesPerSecond.toFixed(0)} B/s`
  } else if (bytesPerSecond < 1024 * 1024) {
    uploadSpeed.value = `${(bytesPerSecond / 1024).toFixed(1)} KB/s`
  } else {
    uploadSpeed.value = `${(bytesPerSecond / 1024 / 1024).toFixed(1)} MB/s`
  }
  
  // 计算剩余时间
  const remainingBytes = totalSize - loaded
  remainingTime.value = formatTime(remainingBytes / bytesPerSecond)
}

const formatTime = (seconds) => {
  if (seconds === Infinity) return '--'
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  const s = Math.floor(seconds % 60)
  
  return [h, m, s]
    .map(v => v.toString().padStart(2, '0'))
    .join(':')
}

7.3 文件预览与校验

javascript复制const filePreview = ref('')

const generatePreview = (file) => {
  if (file.type.startsWith('image/')) {
    const reader = new FileReader()
    reader.onload = (e) => {
      filePreview.value = e.target.result
    }
    reader.readAsDataURL(file)
  } else {
    filePreview.value = null
  }
}

const verifyUpload = async (filePath) => {
  const localHash = await calculateFileHash(file.value)
  const { data } = await axios.post('/api/upload/verify', {
    path: filePath
  })
  
  if (data.hash === localHash) {
    ElMessage.success('文件校验通过')
  } else {
    ElMessage.error('文件校验失败，可能存在上传错误')
  }
}

8. 性能优化与生产环境建议

8.1 前端优化技巧

Web Worker计算hash：

javascript复制// hash-worker.js
self.importScripts('spark-md5.min.js')

self.onmessage = (e) => {
  const { file } = e.data
  const spark = new self.SparkMD5.ArrayBuffer()
  const reader = new FileReader()
  
  reader.onload = (e) => {
    spark.append(e.target.result)
    self.postMessage(spark.end())
  }
  
  reader.readAsArrayBuffer(file)
}

内存管理：

javascript复制// 及时释放文件引用
const releaseFile = () => {
  file.value = null
  URL.revokeObjectURL(filePreview.value)
}

分片大小动态调整：

javascript复制const getDynamicChunkSize = (fileSize) => {
  if (fileSize < 50 * 1024 * 1024) { // <50MB
    return 1 * 1024 * 1024 // 1MB
  } else if (fileSize < 500 * 1024 * 1024) { // <500MB
    return 5 * 1024 * 1024 // 5MB
  } else {
    return 10 * 1024 * 1024 // 10MB
  }
}

8.2 服务端优化建议

使用流式处理：

javascript复制// 避免将整个文件加载到内存
const writeStream = fs.createWriteStream(filePath)
req.pipe(writeStream)

分片存储优化：

javascript复制// 按用户/日期分目录存储
const getStoragePath = (hash, userId) => {
  const date = new Date()
  const dir = path.join(
    UPLOAD_DIR,
    userId,
    `${date.getFullYear()}-${date.getMonth()+1}`
  )
  
  if (!fs.existsSync(dir)) {
    fs.mkdirSync(dir, { recursive: true })
  }
  
  return path.join(dir, hash)
}

设置合理的超时时间：

javascript复制// Nginx配置
client_max_body_size 1000m;
proxy_read_timeout 600s;
proxy_connect_timeout 600s;

8.3 安全防护措施

文件类型校验：

javascript复制const ALLOWED_TYPES = [
  'image/jpeg',
  'image/png',
  'application/pdf'
  // ...其他允许的类型
]

const isValidType = (file) => {
  return ALLOWED_TYPES.includes(file.type)
}

病毒扫描集成：

javascript复制const scanForVirus = async (filePath) => {
  // 调用ClamAV等杀毒软件的API
  const result = await virusScanner.scan(filePath)
  if (result.isInfected) {
    fs.unlinkSync(filePath)
    throw new Error('文件包含病毒')
  }
}

上传频率限制：

javascript复制// 使用express-rate-limit
const uploadLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15分钟
  max: 50 // 每个IP最多50次上传请求
})

app.use('/api/upload/chunk', uploadLimiter)