【vue3组件】【大文件上传】【断点续传】支持文件分块上传，能够在上传过程中暂停、继续上传的组件

一、概述

本示例实现了一个基于 Vue3 和 TypeScript 的断点上传功能。该功能支持文件分块上传，能够在上传过程中暂停、继续上传，并且支持检测已经上传的分块，避免重复上传，提升上传效率。以下是关键的技术点与实现流程：

文件分块：将大文件分成多个小块，每块的大小是固定的（例如 5MB）。
上传进度：通过进度条显示文件上传的进度。
断点续传：支持暂停和继续上传，避免上传过程中断导致的文件重新上传。
文件哈希：通过计算文件的哈希值来唯一标识文件，并检查文件是否已经上传完成。

二、实现步骤

（一）定义状态变量

通过 ref 定义一些响应式状态变量来管理文件、进度、上传状态等信息：

const file = ref<File | null>(null);
const fileHash = ref<string>('');
const chunkSize = 5 * 1024 * 1024; // 每个分块大小（5MB）
const uploadedChunks = ref<number[]>([]); // 已上传的分块索引
const progress = ref<number>(0); // 上传进度
const paused = ref<boolean>(false); // 上传是否暂停
const uploading = ref<boolean>(false); // 是否正在上传

（二）监听文件选择并计算哈希

当用户选择文件后，计算该文件的 SHA-256 哈希值，哈希值用来判断文件是否已经上传过。

const onFileChange = (event: Event) => {const target = event.target as HTMLInputElement;file.value = target.files?.[0] || null;if (file.value) {calculateFileHash();}
};const calculateFileHash = async () => {if (!file.value) return;const buffer = await file.value.arrayBuffer();const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);fileHash.value = [...new Uint8Array(hashBuffer)].map((b) => b.toString(16).padStart(2, '0')).join('');await checkUploadedChunks();
};

（三）检查已上传的分块

调用后端接口检查文件的部分分块是否已经上传，以避免重复上传。

const checkUploadedChunks = async () => {try {const response = await axios.get(getUploadedChunksApi.value, {params: { fileHash: fileHash.value },});if (response.data.uploadedChunks === 'completed') {alert('文件已上传完成！');progress.value = 100; // 设置进度为 100%return true; // 文件已完成上传}uploadedChunks.value = response.data.uploadedChunks || [];return false; // 文件未完成上传} catch (error) {console.error('Error checking uploaded chunks:', error);return false;}
};

（四）开始上传

分块上传文件。上传时检查哪些分块已经上传，跳过已上传的分块。如果上传中出现错误，可以暂停上传。

const startUpload = async () => {if (!file.value) return;paused.value = false;uploading.value = true;const isCompleted = await checkUploadedChunks();if (isCompleted) {uploading.value = false;return;}const totalChunks = Math.ceil(file.value.size / chunkSize);for (let i = 0; i < totalChunks; i++) {if (paused.value) break;if (uploadedChunks.value.includes(i)) {progress.value = ((i + 1) / totalChunks) * 100;continue;}const chunk = file.value.slice(i * chunkSize, (i + 1) * chunkSize);const formData = new FormData();formData.append('file', chunk);formData.append('chunkIndex', i.toString());formData.append('fileHash', fileHash.value);formData.append('totalChunks', totalChunks.toString());try {await axios.post(uploadChunkApi.value, formData);uploadedChunks.value.push(i);progress.value = ((i + 1) / totalChunks) * 100;} catch (error) {console.error('Error uploading chunk:', error);paused.value = true;break;}}if (!paused.value && progress.value === 100) {completeUpload();}uploading.value = false;
};

（五）暂停与继续上传

提供暂停与继续上传的功能，通过控制 paused 变量来实现。

const pauseUpload = () => {paused.value = true;uploading.value = false;
};const resumeUpload = () => {paused.value = false;startUpload();
};

（六）合并分块

所有分块上传完成后，通过后端接口提交合并请求，合并文件。

const completeUpload = async () => {try {await axios.post(completeUploadApi.value, {fileHash: fileHash.value,fileExtension: file.value?.name.split('.').pop(),fileName: file.value?.name,});alert('文件上传完成！');} catch (error) {console.error('Error completing upload:', error);}
};

三、模板部分

<template><div class="upload"><h2>断点上传</h2><input type="file" @change="onFileChange" /><div v-if="file"><p>文件名: {{ file.name }}</p><p>文件大小: {{ (file.size / 1024 / 1024).toFixed(2) }} MB</p><progress :value="progress" max="100"></progress><div class="actions"><button @click="startUpload" :disabled="uploading">开始上传</button><button @click="pauseUpload" :disabled="!uploading">暂停上传</button><button @click="resumeUpload" :disabled="uploading || !paused">继续上传</button></div></div></div>
</template>

四、样式部分

<style scoped>
.upload {width: 400px;margin: 20px auto;
}.actions {margin-top: 10px;
}button {margin-right: 10px;
}progress {width: 100%;height: 20px;margin-top: 10px;
}
</style>