当前端在开发过程中遇到上传文件需求，如果是上传头像、图片小文件之类的，可以正常按上传流程处理。但是当遇到上传大文件需求时，几个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>
附加： 断点续传
理解：断点续传，就是在我们上传过程中由于意外原因断网断电情况让上传终止了，那么上传的是不完整的，我们需要向服务器查询一下相同名字的文件大小，然后将上传位置设置成这个大小即可。