当前位置：首页 > web >正文

Vue + Element Plus 实战：大文件切片上传 + 断点续传

web 2025/6/29 23:43:37

好的！下面是一篇结合 Element Plus 的 Vue 3 大文件切片上传 + 断点续传完整实战教程，UI 用的是 Element Plus，结构清晰，语气亲和，适合你直接复制使用。

整理不易，如果本文对你有帮助，欢迎点个【赞 👍】+【收藏 ⭐】+【关注 🧡】

📦 Vue + Element Plus 实战：大文件切片上传 + 断点续传

今天我们来用 Vue 3 + Element Plus，实战开发一个“支持大文件切片上传、断点续传”的文件上传组件，适合上传视频、压缩包、设计图等大文件场景，带完整前端逻辑和 UI 演示👇

🧩一、功能亮点

✅ 文件切片（Blob 分片）
✅ 并发上传，支持进度条
✅ 秒传校验（文件 hash）
✅ 断点续传（跳过已上传）
✅ 合并通知（服务端拼接）

✨二、最终效果图

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
（上传进度 + 支持断点续传）

🛠️三、完整前端实现（Element Plus 版本）

1️⃣ 安装依赖

npm install element-plus spark-md5

2️⃣ 组件模板（UploadChunk.vue）

<template><el-card><el-upload:show-file-list="false":before-upload="handleBeforeUpload":http-request="handleUpload"dragaccept="*"><i class="el-icon-upload" /><div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em></div></el-upload><el-progressv-if="uploadProgress > 0":percentage="uploadProgress"status="success"style="margin-top: 20px"/></el-card>
</template>

3️⃣ 脚本逻辑（切片、上传、断点续传）

<script setup>
import { ref } from 'vue'
import SparkMD5 from 'spark-md5'
import { ElMessage } from 'element-plus'const uploadProgress = ref(0)
const CHUNK_SIZE = 2 * 1024 * 1024 // 2MBlet file = null
let fileHash = ''
let fileChunks = []// 1. 预处理文件
const handleBeforeUpload = async (rawFile) => {file = rawFilefileChunks = createChunks(file)fileHash = await calculateHash(fileChunks)return false // 阻止默认上传
}// 2. 分片
const createChunks = (file) => {const chunks = []let cur = 0while (cur < file.size) {chunks.push(file.slice(cur, cur + CHUNK_SIZE))cur += CHUNK_SIZE}return chunks
}// 3. 计算 hash
const calculateHash = (chunks) => {return new Promise((resolve) => {const spark = new SparkMD5.ArrayBuffer()let count = 0const reader = new FileReader()const loadNext = () => {if (count >= chunks.length) {resolve(spark.end())return}reader.readAsArrayBuffer(chunks[count])}reader.onload = (e) => {spark.append(e.target.result)count++loadNext()}loadNext()})
}// 4. 获取已上传切片（断点续传）
const getUploadedList = async (hash) => {const res = await fetch(`/uploaded-list?hash=${hash}`)return res.ok ? await res.json() : []
}// 5. 上传逻辑
const handleUpload = async () => {const uploaded = await getUploadedList(fileHash)const uploadChunk = (chunk, index) => {const form = new FormData()form.append('file', chunk)form.append('filename', file.name)form.append('chunkIndex', index)form.append('hash', fileHash)return fetch('/upload-chunk', {method: 'POST',body: form,})}const requests = fileChunks.map((chunk, index) => {if (uploaded.includes(index)) return nullreturn uploadChunk(chunk, index)}).filter(Boolean)let completed = uploaded.lengthconst total = fileChunks.lengthfor (const req of requests) {await reqcompleted++uploadProgress.value = Math.floor((completed / total) * 100)}// 通知合并await fetch('/merge-chunks', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ filename: file.name, hash: fileHash }),})ElMessage.success('上传成功 🎉')uploadProgress.value = 0
}
</script>

📡四、服务端接口规范（参考 Node）

接口说明：

接口	描述
`GET /uploaded-list?hash=xxx`	返回已上传切片 index 列表
`POST /upload-chunk`	接收切片文件，保存到 `/tmp/hash/index`
`POST /merge-chunks`	合并切片为完整文件，保存在 `/uploads/`

服务端可用 fs-extra、multer 等处理上传，你需要支持以下流程：

创建临时目录保存切片 /tmp/<hash>/index
按顺序读取切片合并 fs.appendFileSync
合并完成后清理切片

如果你需要我帮你写 Node.js 服务端的完整代码，也可以直接告诉我 👍

🧠五、总结回顾

功能	实现点
切片上传	`Blob.slice()` 分片，前端循环上传
秒传	前端计算 hash，服务端校验是否上传过
断点续传	获取已上传列表，跳过上传
合并通知	上传完毕后请求服务端合并接口
UI 展示	Element Plus 上传组件 + 进度条反馈