1. 大文件分块上传的核心挑战
前端开发中处理大文件上传一直是个头疼的问题。去年我在一个医疗影像管理系统里就遇到过这个难题——医生们需要上传平均2-3GB的DICOM影像文件，传统的单次上传方式在弱网环境下基本不可用。经过多次实践，我总结出Vue3实现分块上传需要解决的三个关键问题：
首先是浏览器内存限制。当用户选择500MB以上的文件时，如果直接读取整个文件到内存，很容易导致页面崩溃。其次是网络稳定性，特别是在移动端场景，长时间的单次上传极易因网络波动中断。最后是服务端的处理压力，大文件直接写入服务器内存同样存在风险。
2. 技术方案设计
2.1 前端分块策略
核心思路是将文件切割为多个定长片段（chunk），我推荐使用Blob.prototype.slice方法实现。这里有个细节要注意：在Chrome中slice方法已更名为webkitSlice，需要进行兼容处理。分块大小建议设置为1-5MB，这个范围在大多数场景下表现最优：
javascript复制const CHUNK_SIZE = 2 * 1024 * 1024 // 2MB
const chunks = []
let start = 0
while (start < file.size) {
const chunk = file.slice(start, start + CHUNK_SIZE)
chunks.push(chunk)
start += CHUNK_SIZE
}
2.2 上传队列控制
并行上传所有分块会加重服务器负担，我采用队列机制控制并发数。这里用到了p-limit这个轻量级库，实测比手动实现Promise队列更稳定：
javascript复制import pLimit from 'p-limit'
const limit = pLimit(3) // 最大并发3个
const uploadTasks = chunks.map((chunk, index) =>
limit(() => uploadChunk(chunk, index))
)
await Promise.all(uploadTasks)
2.3 断点续传实现
通过localStorage记录已上传的分块索引，当页面刷新后可以继续未完成的上传。关键是要生成唯一的文件指纹，我采用文件名+大小+最后修改时间的MD5作为标识：
javascript复制import md5 from 'crypto-js/md5'
const fileHash = md5(
`${file.name}-${file.size}-${file.lastModified}`
).toString()
3. 完整实现步骤
3.1 前端组件搭建
使用Vue3的Composition API组织代码逻辑。这里我创建了一个FileUploader组件，核心结构如下：
vue复制<template>
<input type="file" @change="handleFileChange" />
<button @click="startUpload">开始上传</button>
<progress :value="progress" max="100"></progress>
</template>
<script setup>
import { ref } from 'vue'
// 业务逻辑...
</script>
3.2 分片上传逻辑
每个分片上传时需要携带额外元信息，服务端用这些数据最终合并文件：
javascript复制const uploadChunk = async (chunk, index) => {
const formData = new FormData()
formData.append('chunk', chunk)
formData.append('chunkIndex', index)
formData.append('totalChunks', chunks.length)
formData.append('fileHash', fileHash)
try {
await axios.post('/upload', formData, {
onUploadProgress: (e) => {
// 更新单个分片进度
}
})
// 记录成功上传的索引
saveUploadedIndex(index)
} catch (err) {
console.error(`分片${index}上传失败`, err)
throw err
}
}
3.3 服务端配合要点
Node.js端需要实现三个关键接口：
- 分片接收接口（/upload）
- 分片合并接口（/merge）
- 上传状态查询接口（/check）
合并文件时要注意使用流式写入，避免内存溢出：
javascript复制const mergeChunks = async (fileHash, totalChunks) => {
const chunkDir = path.resolve('temp', fileHash)
const writeStream = fs.createWriteStream(`uploads/${fileHash}.ext`)
for (let i = 0; i < totalChunks; i++) {
const chunkPath = path.resolve(chunkDir, `${i}`)
const chunk = await fs.promises.readFile(chunkPath)
writeStream.write(chunk)
await fs.promises.unlink(chunkPath) // 删除临时分片
}
writeStream.end()
}
4. 性能优化技巧
4.1 文件校验方案
上传完成后进行文件完整性校验能避免很多问题。我采用前后端协同校验的方案：
javascript复制// 前端计算文件hash
const fileHash = await calculateFileHash(file)
// 服务端校验
const serverHash = await calculateFileHash(`uploads/${fileHash}.ext`)
if (serverHash !== fileHash) {
throw new Error('文件校验失败')
}
4.2 上传加速策略
对于特别大的文件（如超过1GB），可以采用这些优化手段：
- Web Worker计算文件hash避免界面卡顿
- 根据网络速度动态调整分块大小
- 优先上传首尾分片用于快速校验
4.3 错误恢复机制
实现健壮的重试机制需要考虑这些情况：
- 单个分片上传失败自动重试3次
- 网络断开后自动检测恢复
- 服务端重启后能继续未完成的上传
5. 实际踩坑记录
5.1 内存泄漏问题
早期版本在循环读取分片时没有及时释放内存，导致上传10GB以上文件时浏览器崩溃。解决方案是：
- 使用FileReader的onload事件后手动释放内存
- 分片处理间隔加入短暂延时
5.2 进度条抖动
由于网络波动，进度条可能出现回退现象。我的解决方案是：
- 前端维护已上传字节数的绝对记录
- 使用指数平滑算法处理进度显示
5.3 跨域配置陷阱
开发时遇到CORS问题时，需要确保服务端配置：
http复制Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: POST,OPTIONS
6. 完整DEMO扩展建议
在我的GitHub仓库中提供了完整实现，包含这些增强功能：
- 拖拽上传支持
- 文件类型白名单校验
- 上传速度实时计算
- 自动重试机制
- 服务端文件秒传验证
对于企业级应用，还可以考虑集成WebSocket实现实时进度推送，或者使用IndexedDB存储分片数据实现更可靠的断点续传。