新手前端实现大文件分片上传

新手前端实现大文件分片上传

前言

文件上传的场景在工作中时常遇见，必不可免的有时会需要上传一个很大的文件，上传时间比较久，如果遇见网络问题或其他因素影响，容易导致传输失败，这里可以使用分片上传来解决这个问题。

基础知识点

浏览器对象

Blob
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，同时提供了对数据截取的方法slice，而file继承了Blob的功能，所以可以使用此方法将读取的文件进行分片切割，用以拼凑准备上传的数据

1. 把大文件进行分段 比如2M，发送到服务器携带一个标志，暂时使用当前的时间戳，用于标识一个完整文件
2. 服务端保存各段文件；
3. 浏览器端所有分片上传完成，发送给服务端一个合并文件的请求
4. 服务端根据文件标识、类型、各分片顺序进行文件合并

说明

本文章本次只实现浏览器端的分片上传，服务端文件的合并暂不叙述

html

选择文件上传：<input type="file" name="" id="file">
 <button id="btn-submit">点击上传</button>

JS

// 分片的逻辑
<script>
 function submitUpload () {
   
   var chunkSize = 2*1024*1024 //分片大小 2M
   var file = document.getElementById('file').files[0]
   var chunks =