文件分片上传demo

知识点

• File
  File 接口也继承了 Blob 接口的属性
  File 接口没有定义任何方法，但是它从 Blob 接口继承了以下方法：
  Blob.slice([start[, end[, contentType]]])
  new File（[“字符串数组”，fileName）
  .repeat（n） 将原字符串重复n次，返回一个新的字符串

• Formdata 为序列化的表单
  var formData = new FormData();
  formData.append(“username”, “ccy”);
  formData 作为传给服务器的数据

参考链接: link

测试接口：http://httpbin.org/

代码

<script setup>
import { ref } from 'vue';



const file = new File(['test'.repeat(3)], 'test.txt')

// 分片大小
const size = 3
let url = 'http://httpbin.org/post'

// 实际工作中，需要给每片加id进行判断

function chunkFn() {
  
  for(let i = 0; i< file.size; i+=size){
    const chunks = file.slice(i, i+size)
    console.log(chunks)

   
    let upData = new FormData()
    upData.append('chunkData', chunks)

    fetch(url, {method:'post', body:upData})
      .then(response => 
        response.json()
      ).then(data => {
        console.log(data.files)
      })
      
  }

}

</script>

<template>
<div>File ,分片文件</div>
<button @click="chunkFn">测试分片按钮</button>
</template>