<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) return
const 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" />
</template>
<script setup lang="ts">
import SparkMD5 from "spark-md5";
const spark = new SparkMD5()
const onChange=async (e:any)=>{
const file=e.currentTarget.files[0]
const chunks=createChunks(file,2 * 1024 * 1024)
const result=await hash(chunks,file)
}
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}`
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>