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

视频的分片上传，断点上传

article 2025/8/20 23:43:08

上传功能的实现，点击上传按钮，判断添加的文件是否符合要求，如果符合把他放入文件列表中，并把他的状态设置为等待中，对于每个文件，把他们切分为chunksize大小的文件片段，再检查他的状态是否为uploading，并且判断他是否是第一次上传，如果是第一次上传，就从第一给分片上传，如果不是，就从之前上传的分片继续上传，同时，每上传完一个分片，uploadSize和uploadPercent就会更新，如果点击删除按钮，或者暂停上传，则中止上传

为每个视频文件创建新的属性，包括 uid、文件名、状态等信息，用于管理每个视频的上传任务。
创建一个视频数组 fileList，用来存放所有待上传的视频文件，并记录每个视频文件的状态、进度等。
实现文件分片上传。

const fileList = ref([]);
const addFile = (file) => {file = file.fileif (fileList.value.length > sysSettingStore.sysSetting.videoPCount) {proxy.Message.warning(`最多可以添加${sysSettingStore.sysSetting.videoPCount}个视频`);return}let fileName = file.nameconst lastPoint = fileName.lastIndexOf('.')fileName = lastPoint == -1 ? fileName : fileName.substring(0, lastPoint)const fileItem = {file: file,uid: file.uid,fileName: fileName,status: STATUS.waiting.value,uploadSize: 0,totalSize: file.size,uploadPercent: 0,pause: false,chunkIndex: 0,errMsg: null,};fileList.value.push(fileItem);if (fileItem.totalSize == 0) {fileItem.status = STATUS.emptyfile.value;return;}
//   判断文件大小if (fileItem.totalSize > sysSettingStore.sysSetting.videoSize * 1024 * 1024) {fileItem.status = STATUS.largefile.value;return;}//   正在上传的文件let uploadingFiles = fileList.value.filter((item) => {return item.status == STATUS.uploading.value;});if (uploadingFiles.length > MAX_UPLOADING) {return;}uploadFile(fileItem.uid);
};

切片上传具体为：

1.根据getFileByUid()找到当前文件

// 通过uid找到当前文件
const getFileByUid = (uid) => {const currentFile = fileList.value.find((item) => {return item.uid == uid;});return currentFile;
};

2.对当前文件的状态设置为uploading，进行切片

3.请求生成一个上传 ID，uploadId 是服务器生成的唯一标识符，用于标识一个文件的上传任务。

当上传被暂停或中断时，使用相同的 uploadId 可以确保在恢复上传时，服务器能够继续处理文件的分片，而不是将其视为一个全新的文件上传任务。这样就避免了不同上传任务之间的混乱。
即使文件被分割成多个分片上传，所有分片都会与相同的 uploadId 关联。
同一个文件的所有分片的 uploadId 都是一致的。

4.进行断点处理

为什么设置chunkIndex = chunkIndex ? chunkIndex : 0？
这是为了支持断点续传，即从上传进度的某个位置继续上传文件的剩余部分，而不是重新从头开始上传。

5.将文件的状态设置为success，进度为100%

6.开始上传下一个待上传的文件。

const uploadFile = async (uid, chunkIndex) => {// 当前文件const currentFile = getFileByUid(uid);// 文件状态设置为uploadingcurrentFile.status = STATUS.uploading.value;const file = currentFile.file;const fileSize = currentFile.totalSize;const chunks = Math.ceil(fileSize / CHUNK_SIZE);if (!currentFile.uploadId) {// 如果第一次上传的时候，请求服务端生成一个uploadIdlet resultData = await proxy.Request({url: proxy.Api.preUploadVideo,params: {fileName: currentFile.fileName,chunks,},errorCallback: (errorMsg) => {currentFile.status = STATUS.fail.value;currentFile.errMsg = errorMsg;},});if (!resultData) {return;}currentFile.uploadId = resultData.data;}
//   for(let i=chunkIndex; i<chunks; i++) 中的
//   i=chunkIndex 表示从指定的分片索引 chunkIndex 开始上传，
//   而不是从 0 开始。这是为了支持断点续传， 即从上传进度的
//   某个位置继续上传文件的剩余部分，而不是重新从头开始上传。
//   循环处理chunkIndex = chunkIndex ? chunkIndex : 0;for (let i = chunkIndex; i < chunks; i++) {if (currentFile.pause || currentFile.del) {break;}let start = i * CHUNK_SIZE;let end = start + CHUNK_SIZE >= fileSize ? fileSize : start + CHUNK_SIZE;let chunkFile = file.slice(start, end);let uploadResult = await proxy.Request({url: proxy.Api.uploadVideo,dataType: "file",params: {chunkFile: chunkFile,chunkIndex: i,uploadId: currentFile.uploadId,},showError: false,errorCallback: (errorMsg) => {currentFile.status = STATUS.fail.value;currentFile.errMsg = errorMsg;},uploadProgressCallback: (event) => {// event.loaded 表示已上传的字节数。let loaded = event.loaded;if (loaded > fileSize) {loaded = fileSize;}currentFile.uploadSize = i * CHUNK_SIZE + loaded;currentFile.uploadPercent = Math.floor((currentFile.uploadSize / fileSize) * 100);},});if (uploadResult == null) {break;}currentFile.chunkIndex = i;if (i < chunks - 1) {continue;}currentFile.status = STATUS.success.value;currentFile.uploadPercent = 100;}const nextItem = fileList.value.find((item) => {return item.status == STATUS.waiting.value;});if (nextItem) {uploadFile(nextItem.uid);}
};最后转化为字符串提交uploadFileList:JSON.stringify(uploadFileList)