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) 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() //创建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>