vue分片上传

<template><div><input type="file" id="input" /><button @click="uploadFile">上传</button></div>
</template><script lang="ts" setup>
let chunkSize=1024 * 1024,index=0;
const uploadFile=()=>{let inp=document.getElementById('input');const file=inp.files[0]const [fileName,ext] = file.name.split('.')let start=index * chunkSize // 切片起始if(start>file.size) returnconst blob= file.slice(start,start+chunkSize) // 切片const formData=new FormData()const blobName=`${fileName}${index}.${ext}` // 拼接片名const blobFile=new File([blob],blobName)console.log(blobFile)formData.append('file', blobFile)fetch('/uploadFile',{method: 'post',body: formData}).then(()=>{index++;uploadFile()})
}</script>

<template><h1>上传</h1><input type="file" @change="onChange" /><asd/>
</template><script setup lang="ts">
import  asd from './shangchuan.vue'
import SparkMD5 from "spark-md5";
const spark = new SparkMD5() //创建SparkMD5的实例const onChange=async (e:any)=>{const file=e.currentTarget.files[0] // 获取文件const chunks=createChunks(file,2 * 1024 * 1024) // 进行切片blob流const result=await hash(chunks,file) // 进行哈希加密得到16位字符
}
// 计算哈希
const hash=(chunks:any,files:any)=>{return new Promise(resolve => {const _read=(i:number)=>{if(i>=chunks.length){resolve(spark.end()) // 计算结束return // 读取完成}const blob=chunks[i] // 获取每一项const reader=new FileReader() // 解析每一块数据reader.readAsArrayBuffer(blob)const [fileName,ext] = files.name.split('.')const blobName=`${fileName}.${ext}` // 拼接片名// 转成File流const blobFile=new File([blob],blobName)const formData=new FormData() // 后端要的格式formData.append('file', blobFile)reader.onload=e=>{const bytes=e.target.result // 读取到的字节数组spark.append(bytes)fetch('/uploadFile',{method: 'post',body: formData}).then(()=>{_read(i+1)})}}_read(0)})
}// 切片
const createChunks=(file:any,chunkSize:any)=>{const resurl=[]for(let i=0;i<file.size;i+=chunkSize){resurl.push(file.slice(i,i+chunkSize))}return resurl
}
</script><style scoped></style>