知识点
-
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>