JS实现大文件切片上传以及断点续传

切片上传的原理是：

1.因为file对象的基类是blob，所以可以使用slice分割

2.将从input中获取的file对象使用slice进行分割，每5M一片

3.分别上传各个切片，等待切片上传完通知服务端合并（或者传每一片时把切片总数量也传递过去，让服务端自行合并）

断点续传原理：

切片上传完成之后将上传完的索引放到localStrage上，再次上传时判断是否上传，如果已经上传了则跳过这一片

实现代码：

这里是主进程👇

import { getFileId } from './utils/FileUtils'
import { getLocalStrage, setLocalStrage, removeLocalStrage } from './utils/localStrage'
const worker = new Worker(new URL('./uploadWorker.js', import.meta.url))// 监听WebWorker的消息
worker.onmessage = (e) => {const { type, data, filename, fileId, uploadInfo } = e.dataif (type === 'progress') {document.getElementById('progress').innerHTML = `当前上传进度：${data}%`// 更新切片上传日志setLocalStrage(fileId, JSON.stringify(uploadInfo))} else if (type === 'complete') {document.getElementById('progress').innerHTML = `上传完毕！`worker.postMessage({type: 'merge',filename: filename,})// 移除切片上传日志removeLocalStrage(fileId)}
}// 监控用户上传数据
const upload = document.getElementById('fileInput')upload?.addEventListener('change', async (e) => {const file = e?.target?.files?.[0]const fileId = await getFileId(file)const infoLocal = getLocalStrage(fileId)const uploadInfo = infoLocal  ? JSON.parse(infoLocal) : {fileId: fileId,fileName: file.name,uploadedChunks: [],}worker.postMessage({type: 'upload',file,fileId: fileId,uploadInfo: uploadInfo})
})

这里是工作进程👇

const CHUNK_SIZE = 1024 * 1024 * 5 // 5MBlet uploadInfo = null;// 建通主线程的消息
self.onmessage = (e) => {console.log('收到主线程的消息')const { type, file, filename, fileId, uploadInfo: uploadInfoLocal } = e.dataif (type === 'upload') {// 初始化上传信息uploadInfo = uploadInfoLocal// 开始上传文件uploadFile(file, fileId)} else if (type === 'merge') {mergeFile(filename)}
}// 切片上传文件
function uploadFile(file, fileId) {const fileName = file.name// 获取thunk的数量const chunksCount = Math.ceil(file.size / CHUNK_SIZE)// 获取切片数据const chunks = getChunks(file)uploadQueueChunks(chunks, fileName, chunksCount, fileId)
}/*** 获取切片数据* @param file * @returns */
function getChunks(file) {const chunks = []for(let i = 0; i < file.size; i += CHUNK_SIZE) {chunks.push(file.slice(i, i + CHUNK_SIZE))}return chunks
}/*** 上传队列* @param chunks 切片数据* @param fileName 文件名* @param chunksCount 总切片数* @param maxConcurrency 最大并发数*/
async function uploadQueueChunks(chunks, fileName, chunksCount, fileId, maxConcurrency = 5) {// 正在上传的队列const queue = []// 正在上传的文件数量let activeUploads = 0// 遍历上传切片for(let i = 0; i < chunks.length; i++) {// 如果上传过了就直接跳过if(uploadInfo.uploadedChunks.indexOf(i) > -1) {console.log(`第${i}片已经上传过了`)continue}const chunk = chunks[i]// 判断当前上传队列是否达到最大并发if(activeUploads >= maxConcurrency) {// 等待队列中上传完成await Promise.race(queue)}// 上传切片const uploadPromise = uploadedChunk(chunk, i, fileName, chunksCount).then(res=> {// 上传完成，从队列中移除queue.splice(queue.indexOf(uploadPromise), 1)// 更新上传信息uploadInfo.uploadedChunks.push(i)// 减少正在上传的数量activeUploads--// 发送上传进度self.postMessage({type: 'progress',data: Math.round((uploadInfo.uploadedChunks.length / chunksCount) * 100),filename: fileName,uploadInfo: uploadInfo,fileId});})queue.push(uploadPromise)activeUploads++}await Promise.all(queue)// 发送完成通知self.postMessage({type: 'complete',filename: fileName,fileId});
}/*** 上传切片数据* @param thunk 切片数据* @param index 切片索引* @param name 文件名* @param total 总切片数*/
function uploadedChunk(thunk, index, name, total) {console.log(`上传第${index}片`)const formData = new FormData()formData.append('file', thunk)formData.append('index', index.toString())formData.append('filename', name)formData.append('totalChunks', total)return fetch('http://localhost:3000/upload', {method: 'POST',body: formData})
}function mergeFile(filename) {console.log(`开始合并文件：${filename}`)return fetch(`http://localhost:3000/merge`, {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ filename })})
}

这里是工具类

/*** 获取文件唯一ID* @param {*} file * @returns */
export async function getFileId(file) {const buffer = await file.arrayBuffer();const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);const hashArray = Array.from(new Uint8Array(hashBuffer));return hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');}export function getLocalStrage(fileId) {return localStorage.getItem(fileId);
}export function setLocalStrage(fileId, data) {return localStorage.setItem(fileId, data);
}export function removeLocalStrage(fileId) {return localStorage.removeItem(fileId);
}

文件目录是这样的👇

就能实现下面的效果: