直接上代码!!
<script >
import axios from 'axios';
import { ref } from 'vue-demi';
export default {
setup() {
const percent=ref(0)
const change = async(e) => {
// 设置分流大小
let chunkSize = 10 * 1024 * 1024; //10 M
const target = e.target;
//开始的偏移量
let start = 0;
//一共切了多少片
let index = 0;
//判断是否为空 如果不判断用ts时会报错
if (target.files) {
const file = target.files[0];
// 获取文件的信息 结构出文件的名字、大小和格式
const { name, size, type } = file;
//如果开始的偏移量小于文件大小
while (start < size) {
let blob = null;
// 判断如果超出切片就取整个数据
if (start + chunkSize > size) {
blob = file.slice(start, size);
} else {
blob = file.slice(start, start + chunkSize);
}
// 每次累加切片
start+=chunkSize
// 创建文件(每个切完片的单个数据)
let blobFile=new File([blob],name)
//创建FormData用来上传文件
let formData=new FormData()
//传递的数据
formData.append('file',blobFile)
//添加对应的编号
formData.append('index',index+'')
await axios.post('http://127.0.0.1:8000/api/uplodefile/',formData)
index++;
percent.value=(start/size)*100;
}
// axios.get('合并接口?dor'+md5(name))
percent.value=100;
}
};
return {
change,
};
},
};
</script>