简单的文件操作-分片上传【h5技术】

在以前我们用分片上传很麻烦可能还需要用到一些库，今天给大家带来H5的分片上传，简单易学

<input type="file" id="input"></input>
<button id="btn">上传</botton>

let chunkSize = 1024,   // 每次上传的文件大小 
    index = 0;   // 递归上传索引

btn.addEventListener('click',upload)

function upload(){
  const file = input.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)
  
  formData.append('file',blobFile)

  fetch('/upload',{
    method: 'post',
    body: formData,
  }).then(()=>{
     index++
     upload()
  })
}