腾讯云主机做网站杭州公司网站制作

腾讯云主机做网站,杭州公司网站制作,什么是企业vi设计,福州门户网站建设vue3Ts实现大文件上传 原理 分片上传的原理就像是把一个大蛋糕切成小块一样。首先就是将上传的大文件分成许多小块#xff0c;每个小块大小相同#xff0c;然后逐步上传这些小块到服务器#xff0c;上传的时候#xff0c;可以同时上传多个小块#xff0c;也可以一个一个上…vue3Ts实现大文件上传原理分片上传的原理就像是把一个大蛋糕切成小块一样。首先就是将上传的大文件分成许多小块每个小块大小相同然后逐步上传这些小块到服务器上传的时候可以同时上传多个小块也可以一个一个上传上传每个小块之后服务器会保存这些小块并记录它们的顺序和位置当我们所有的小块上传完成之后服务器会把这些小块按照正确的顺序拼接起来还原成我们的大文件( 下图就是基本的流程 )。1.项目搭建实现大文件上传前端vue3 ts2.读取文件在我们搭建好之后通过监听 input 的 change 事件当提交文件之后在回调函数中拿到对应文件。templatedivh1大文件上传/h1input typefilechangehandleUpload/div/templatescript setup langtsconsthandleUpload(e:Event){// console.log((e.target as HTMLInputElement).files); // 伪数组constfiles(e.targetasHTMLInputElement).files// 如果拿到文件返回if(!files)return//读取文件console.log(files[0]);}/script3.文件分片文件分片我们会用到 Blob 对象的 slice 方法我们在上一步获得的 File 对象它是继承于 Blob 的。// 1MB 1024KB 1024 * 1024BconstCHUNK_SIZE1024*1024// 1MB// 在这里进行文件的分片constcreateChunks(file:File){// 设置开始的节点let cur0// 空数组用来存储分割后的文件块let chunks[]// 循环遍历文件将它分割成多个块while(curfile.size){// 提取 start 到 end 之间的内容constblobfile.slice(cur,curCHUNK_SIZE)// 提取出来的内容添加到 chunks 数组中chunks.push(blob)// 更新读取的位置curCHUNK_SIZE}// 返回文件块的数组returnchunks}consthandleUpload(e:Event){// console.log((e.target as HTMLInputElement).files); // 伪数组constfiles(e.target asHTMLInputElement).files// 如果拿到文件返回if(!files)return//读取文件console.log(files[0])// 文件切片constchunkscreateChunks(files[0])console.log(chunks);}4.hash 算法切片完成之后开始计算 hash 值需要安装 spark-md5 工具因为计算 hash 值需要用到。constcalculateHash(chunks:Blob[]){returnnewPromise((resolve){lettarget:Blob[][]// 在每次计算哈希之前清空target数组// 创建一个新的SparkMD5对象用于计算MD5哈希值constsparknewSparkMD5.ArrayBuffer();// 遍历每个Blob片段chunks.forEach((chunk,index){// 如果是第一个或最后一个片段则将其完整地加入target数组if(index0||indexchunks.length-1){target.push(chunk);}else{// 如果是中间的片段则只取片段的前2字节、中间2字节和最后2字节target.push(chunk.slice(0,2));target.push(chunk.slice(CHUNK_SIZE/2,CHUNK_SIZE/22));target.push(chunk.slice(CHUNK_SIZE-2,CHUNK_SIZE));}});// 创建一个新的FileReader对象constfileReadernewFileReader();// 读取target数组中的Blob数据为ArrayBufferfileReader.readAsArrayBuffer(newBlob(target));// 当FileReader读取完成时触发fileReader.onload(e){// 将读取的结果追加到SparkMD5对象中spark.append((e.targetasFileReader).resultasArrayBuffer);// 计算最终的MD5哈希值consthashspark.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(合并成功)})}