Vue3实现大文件(图片/视频附件)分片上传的完整指南

npm install spark-md5 axios

<template>
  <div>
    <input type="file" @change="handleFileSelect" />
    <div v-if="progress > 0">
      上传进度: {{ progress }}%
      <div class="progress-bar">
        <div class="progress" :style="{ width: progress + '%' }"></div>
      </div>
    </div>
  </div>
</template>

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

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

const handleFileSelect = async (e) => {
  const file = e.target.files
  if (!file) return
  
  // 计算文件hash
  const reader = new FileReader()
  reader.onload = (e) => {
    const spark = new SparkMD5.ArrayBuffer()
    spark.append(e.target.result)
    const hash = spark.end()
    console.log('File hash:', hash)
  }
  reader.readAsArrayBuffer(file)
  
  // 分片上传逻辑
  const chunkSize = 5 * 1024 * 1024 // 5MB
  const chunks = Math.ceil(file.size / chunkSize)
  
  for (let i = 0; i < chunks; i++) {
    const start = i * chunkSize
    const end = Math.min(start + chunkSize, file.size)
    const chunk = file.slice(start, end)
    
    await uploadChunk(chunk, i, chunks)
    progress.value = Math.round((i + 1) / chunks * 100)
  }
}

const uploadChunk = async (chunk, index, total) => {
  const formData = new FormData()
  formData.append('chunk', chunk)
  formData.append('index', index)
  formData.append('total', total)
  formData.append('filename', file.value.name)
  
  try {
    await axios.post('/api/upload-chunk', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    console.log(`Chunk ${index + 1}/${total} uploaded`)
  } catch (error) {
    console.error('Chunk upload failed:', error)
  }
}
</script>

// 在服务端记录已上传分片
const uploadedChunks = ref(new Set())

const uploadChunk = async (chunk, index, total) => {
  if (uploadedChunks.value.has(index)) {
    console.log(`Skipping already uploaded chunk ${index}`)
    return
  }
  
  // ...上传逻辑...
  uploadedChunks.value.add(index)
}

const checkInstantUpload = async (file) => {
  const response = await axios.get('/api/check-file', {
    params: {
      filename: file.name,
      size: file.size
    }
  })
  
  if (response.data.exists) {
    console.log('File already exists on server')
    return true
  }
  return false
}

// 使用Web Workers计算MD5
const calculateMD5 = (file) => {
  return new Promise((resolve) => {
    const worker = new Worker(new URL('./md5-worker.js', import.meta.url))
    worker.onmessage = (e) => resolve(e.data)
    worker.postMessage(file)
  })
}

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

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

app.post('/api/upload-chunk', upload.single('chunk'), (req, res) => {
  const { index, total, filename } = req.body
  
  // 保存分片到临时文件
  const chunkPath = path.join('uploads', `${filename}.part${index}`)
  fs.writeFileSync(chunkPath, req.file.buffer)
  
  res.send({ success: true })
})

app.post('/api/merge-chunks', (req, res) => {
  const { filename } = req.body
  
  // 合并分片
  const chunks = []
  for (let i = 0; i < Math.ceil(req.body.size / 5e6); i++) {
    chunks.push(fs.readFileSync(`uploads/${filename}.part${i}`))
  }
  
  fs.writeFileSync(`uploads/${filename}`, Buffer.concat(chunks))
  
  // 清理临时文件
  for (let i = 0; i < Math.ceil(req.body.size / 5e6); i++) {
    fs.unlinkSync(`uploads/${filename}.part${i}`)
  }
  
  res.send({ success: true, url: `/uploads/${filename}` })
})

const fileSchema = new Schema({
  filename: String,
  size: Number,
  chunks: Number,
  uploaded: Number,
  hash: String,
  createdAt: { type: Date, default: Date.now }
})

// 服务端实现分片排序
const sortedChunks = Array.from({ length: totalChunks }, (_, i) => i)
  .map(i => ({ index: i, path: `uploads/${filename}.part${i}` }))
  .sort((a, b) => a.index - b.index)

// 检测浏览器支持情况
if (!window.FileReader || !window.Blob) {
  console.error('Current browser does not support required features')
}