vue实现分段上传
分段上传的实现原理
分段上传（Chunk Upload）是将大文件分割成多个小块依次上传的技术，常用于解决大文件上传超时、网络不稳定等问题。Vue中可通过前端分片配合后端接口实现。
前端分片处理
使用File对象的slice方法将文件切分为多个Blob块：
function createChunks(file, chunkSize) {
const chunks = []
let start = 0
while (start < file.size) {
chunks.push(file.slice(start, start + chunkSize))
start += chunkSize
}
return chunks
}上传进度计算
通过axios的onUploadProgress回调实现进度监控：
const uploadChunk = (chunk, index) => {
const formData = new FormData()
formData.append('chunk', chunk)
formData.append('index', index)
formData.append('total', totalChunks)
return axios.post('/upload', formData, {
onUploadProgress: progressEvent => {
const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100)
// 更新进度状态
}
})
}并发控制
使用Promise.all实现有限并发上传：
const parallelUpload = async (chunks, limit = 3) => {
const queue = []
for (let i = 0; i < chunks.length; i++) {
const task = uploadChunk(chunks[i], i).then(() => {
queue.splice(queue.indexOf(task), 1)
})
queue.push(task)
if (queue.length >= limit) {
await Promise.race(queue)
}
}
await Promise.all(queue)
}后端合并处理
上传完成后需通知后端合并分片（示例为Node.js逻辑）：
fs.appendFileSync(finalPath, chunkData)
if (currentChunk === totalChunks) {
// 触发文件合并操作
}断点续传实现
通过本地存储记录已上传分片：
// 上传前检查本地记录
const uploaded = localStorage.getItem(file.uniqueIdentifier) || []
chunks.filter((_, index) => !uploaded.includes(index))完整性校验
上传完成后发送MD5校验请求：
const fileHash = await calculateMD5(file)
axios.post('/verify', { hash: fileHash })注意事项
- 分片大小建议设置为1-5MB
- 需确保分片上传顺序无关性
- 服务端需实现临时分片存储和清理机制
- 跨分片上传需保持唯一文件标识符
完整实现需配合服务端逻辑，包括分片接收、临时存储、最终合并等操作。前端主要关注分片生成、进度展示和错误重试机制。
