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

vue3+Ts实现大文件上传

news 2026/8/15 22:46:04

vue3+Ts实现大文件上传

原理
分片上传的原理就像是把一个大蛋糕切成小块一样。

首先就是将上传的大文件分成许多小块，每个小块大小相同，然后逐步上传这些小块到服务器，上传的时候，可以同时上传多个小块，也可以一个一个上传，上传每个小块之后，服务器会保存这些小块，并记录它们的顺序和位置，当我们所有的小块上传完成之后，服务器会把这些小块按照正确的顺序拼接起来，还原成我们的大文件( 下图就是基本的流程 )。

1.项目搭建
实现大文件上传

前端：vue3 + ts

2.读取文件
在我们搭建好之后，通过监听 input 的 change 事件，当提交文件之后，在回调函数中拿到对应文件。

<template><div><h1>大文件上传</h1><input type="file"@change="handleUpload"></div></template><script setup lang="ts">consthandleUpload=(e:Event)=>{// console.log((e.target as HTMLInputElement).files); // 伪数组constfiles=(e.targetasHTMLInputElement).files// 如果拿到文件返回if(!files)return//读取文件console.log(files[0]);}</script>

3.文件分片
文件分片我们会用到 Blob 对象的 slice 方法，我们在上一步获得的 File 对象，它是继承于 Blob 的。

// 1MB = 1024KB = 1024 * 1024BconstCHUNK_SIZE=1024*1024// 1MB// 在这里进行文件的分片constcreateChunks=(file:File)=>{// 设置开始的节点let cur=0// 空数组，用来存储分割后的文件块let chunks=[]// 循环遍历文件，将它分割成多个块while(cur<file.size){// 提取 start 到 end 之间的内容constblob=file.slice(cur,cur+CHUNK_SIZE)// 提取出来的内容添加到 chunks 数组中chunks.push(blob)// 更新读取的位置cur+=CHUNK_SIZE}// 返回文件块的数组returnchunks}consthandleUpload=(e:Event)=>{// console.log((e.target as HTMLInputElement).files); // 伪数组constfiles=(e.target asHTMLInputElement).files// 如果拿到文件返回if(!files)return//读取文件console.log(files[0])// 文件切片constchunks=createChunks(files[0])console.log(chunks);}

4.hash 算法
切片完成之后开始计算 hash 值，需要安装 spark-md5 工具，因为计算 hash 值需要用到。

constcalculateHash=(chunks:Blob[])=>{returnnewPromise((resolve)=>{lettarget:Blob[]=[]// 在每次计算哈希之前清空target数组// 创建一个新的SparkMD5对象，用于计算MD5哈希值constspark=newSparkMD5.ArrayBuffer();// 遍历每个Blob片段chunks.forEach((chunk,index)=>{// 如果是第一个或最后一个片段，则将其完整地加入target数组if(index===0||index===chunks.length-1){target.push(chunk);}else{// 如果是中间的片段，则只取片段的前2字节、中间2字节和最后2字节target.push(chunk.slice(0,2));target.push(chunk.slice(CHUNK_SIZE/2,CHUNK_SIZE/2+2));target.push(chunk.slice(CHUNK_SIZE-2,CHUNK_SIZE));}});// 创建一个新的FileReader对象constfileReader=newFileReader();// 读取target数组中的Blob数据为ArrayBufferfileReader.readAsArrayBuffer(newBlob(target));// 当FileReader读取完成时触发fileReader.onload=(e)=>{// 将读取的结果追加到SparkMD5对象中spark.append((e.targetasFileReader).resultasArrayBuffer);// 计算最终的MD5哈希值consthash=spark.end();// 清空target数组，避免重复使用旧数据target=[];// 解析结果resolve(hash);};});};

5.文件合并
合并需要我们前端去进行请求到后端服务器，并且传输需要的数据，然后进行操作

constmergeRequest=()=>{fetch('http://localhost:3000/merge',{method:"POST",headers:{'Content-Type':'application/json'},body:JSON.stringify({fileHash:fileHash.value,fileName:fileName.value,size:CHUNK_SIZE})}).then(()=>{alert('合并成功！')})}