欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 文化 > 【vue3组件】【大文件上传】【断点续传】支持文件分块上传,能够在上传过程中暂停、继续上传的组件

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

2025/3/16 7:09:58 来源:https://blog.csdn.net/qq_59344127/article/details/145304338  浏览:    关键词:【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>

五、总结

通过以上的实现,我们可以完成一个支持断点续传和分块上传的功能。该方案不仅提升了大文件上传的效率,还避免了上传过程中断的影响。通过 Vue3 与 TypeScript 的结合,实现了清晰的状态管理和组件化的文件上传逻辑,便于后续的维护和扩展。

该功能组件已在github开源(对应后端也已开源)在apps\web-ele\src\views\test\test5\index.vue

🌐 前端项目 Vue3-components

已在 GitHub 开源:Vue3-components

项目概述:
基于最新技术栈 Vue3 + Vite + TypeScript,采用 vben 开源的后端管理系统,前后端完美衔接,为您的开发提供高效且现代的解决方案。

主要特点:

  • Vue3 + Vite + TypeScript:基于前沿技术开发,提升开发效率和性能。
  • 多套主题支持:提供可配置的主题系统,让应用界面与品牌风格完美匹配。
  • 内置国际化:支持多语言,满足全球化需求。
  • 动态路由权限生成:内置动态权限管理和路由生成方案,实现细粒度的权限控制。

功能亮点:

  • 快速集成 Django 后端,轻松调用 Django-DRF-components 系列功能
  • websockt、sse示例
  • 大文件断点续传
  • 强大的文件管理系统,支持文件上传和下载
  • 高度可定制的界面和功能模块

🚀 Django封装高复用高可移植的apps系列 - 快速集成与高效开发!

已在 GitHub 开源:Django-DRF-components

特点:

  • 高复用性:每个组件都经过精心设计,确保可在不同项目中无缝使用。
  • 高可移植性:简单集成,快速实现所需功能,节省开发时间。
  • 灵活扩展:可根据需求轻松定制和扩展。
  • 功能完备:包括常见的上传功能、文件管理、用户认证等多种实用功能,满足各种开发需求。

🔧 涵盖功能:

  • 文件上传(普通、分块上传)
  • 用户认证(RBAC)
  • JWT认证app
  • 邮箱登录、验证、重置密码
  • 导出Excel、PDF
  • 封装通用views类
  • SSE(服务器推送事件)
  • WebSocket
  • 文件管理与存储
  • 多种常见工具集(如权限验证、数据处理等)

开源优点:

  • 快速启动、低门槛接入
  • 大量实用的模板与示例代码
  • 高效的文档支持与社区维护

立即访问 GitHub,开始使用前后端完美结合的 Django 与 Vue3 项目,提升开发效率和应用性能!【查看代码(后端)】【查看代码(前端)】


版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词