一篇文章介绍File、Blob、FormData、文件分片上传

File、Blob、FormData

File对象的初始化（new File）

第一个参数是一个字符串数组，可以理解为文件的内容。

第二个参数是文件名字符串。

new File(["First Line Text","Second Line Text"],FileName)

File 继承了所有Blob的属性

File对象可以看作一种特殊的Blob对象

oldBlob.slice([start[,end[],contentType]])

blob 对象可以通过.slice() 得到一个新的blob对象

FormData 为序列化表单

let data = new FormData()

data.append("key","vallue")

文件分片上传代码实现

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

<template>
  <div>File Blob FormData 文件分片上传</div>
</template>
​
<script setup lang='ts'>
const file = new File(['aabbcc123x'.repeat(100)],'text111.txt')
console.log(file);
​
// 分片大小
const size= 30
const url = 'https://httpbin.org/post'
​
async function chunkUpFn(){
  for(let i =0; i<file.size; i+=size){
    const chunk = file.slice(i,i+size)
    console.log(chunk);
    let upData = new FormData()
    upData.append('chunkData',chunk)
   fetch(url,{method:'post',body:upData}).then(data=>{
    console.log(data);
    return data.text()
   }).then(d=>console.log(d))
​
  }
}
chunkUpFn()
</script>
<style scoped lang='less'>
</style>

这里只是一个简单的分片上传，实际工作中，分片上传很复杂，每个片段需要加id，需要判断上传的片段是否有id，通过该例子加深印象。