当前端在开发过程中遇到上传文件需求，如果是上传头像、图片小文件之类的，可以正常按上传流程处理。但是当遇到上传大文件需求时，几个G或者十几个G，那么需要将这么大的文件分割成许多小片段分别上传，这种实现思路称为分片上传。
实现分片上传，精髓就是将文件分割成小片段，此时我们需要用到FormData对象和Bolb对象。
核心代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="file" name="file" id="file">
<button id="upload" onClick="upload()">上传</button>
<script>
//设置每个切片大小
let bytesPerPiece = 1024*1024
//上传文件函数
function upload(){
//获取上传文件
let file = document.getElementById('file').files[0];
let start = 0, end, index = 0, filesize = file.size, name = file.name;
//计算切片总数
let totalPieces = Math.ceil(filesize/bytesPerPiece);
while(start < totalPieces){
end = start + bytesPerPiece;
if(end > filesize){
end = filesize
}
let chunk = file.slice(start, end);
let formData = new FormData();
formData.append('file', chunk, filename);
//原生js发请求
// let xhr = new XMLHttpRequest();
// xhr.onreadystatechange = function(){
// if(this.readyState == 4 && this.status == 200){
// }
// }
// xhr.open('post', '/api/upload', true);
// xhr.send(formData);
// 使用jquery,需要将contentType，processData设置为false
// $.ajax({
// url: '/api/upload',
// type: 'post',
// data: formData,
// processData: false,
// contentType: false
// }).success(res=>{
// }).error(err=>{
// })
}
}
</script>
</body>
</html>
附加： 断点续传
理解：断点续传，就是在我们上传过程中由于意外原因断网断电情况让上传终止了，那么上传的是不完整的，我们需要向服务器查询一下相同名字的文件大小，然后将上传位置设置成这个大小即可。
参考文章：http://blog.ncmem.com/wordpress/2023/11/14/js%e5%ae%9e%e7%8e%b0%e5%a4%a7%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0-%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0%e6%96%b9%e6%b3%95/
欢迎入群一起讨论
标签：文件,end,分片,js,let,file,e4%,上传 From： https://www.cnblogs.com/songsu/p/17831555.html