js实现⼤⽂件上传——分⽚上传⽅法
当前端在开发过程中遇到上传⽂件需求，如果是上传头像、图⽚⼩⽂件之类的，可以正常按上传流程处理。但是当遇到上传⼤⽂件需求时，⼏个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 = ElementById('file').files[0];
let start = 0, end, index = 0, filesize = file.size, name = file.name;
//计算切⽚总数
let totalPieces = il(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();
//  adystatechange = function(){
//      adyState == 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>
附加：断点续传
理解：断点续传，就是在我们上传过程中由于意外原因断⽹断电情况让上传终⽌了，那么上传的是不完整的，我们需要向服务器查询⼀下相同名字的⽂件⼤⼩，然后将上传位置设置成这个⼤⼩即可。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。