大文件分片上传和断点续传功能实现

    最近所做一个项目中需要做很多上传文件功能,项目所用技术栈是vue+elementUI,上传插件是选择的elementUI中的el-upload,所选插件对于一般的图片,word文档,表格之类的可以正常满足需要.但是对于有些上传需要的是能够满足大文件的上传,而el-upload中文件上传是在点击上传按钮后直到文件上传成功页面上才显示出来,而且没有进度条的显示,在大文件上传中,长时间看不到文件上传及进度,对于用户的体验非常不好,因此在大文件上传时引入分片上传和断点续传功能.
    分片上传,即是把文件在上传前对要上传的文件进行分片,然后对每片进行读取上传,并配合每片上传完进度展示整个文件的上传进度条.
    断点续传,即是在文件上传中如果因为页面刷新等因素导致上传被打断,当再次点击上传时,可以通过读取已上传的文件片数,继而上传整体文件的剩余部分,节省上传时间,提交上传效率.
    下面分享下我项目中实现大文件分片上传和断点续传的实现过程,
    1.使用分片上传需要用到el-upload中自定义上传(http-request)来代替默认上传(on-change)方法
   2.上传文件前需要对文件进行读取,读取文件需要计算文件的hash值,而计算文件的hash值,通过spark-md5来实现.具体可以参考http://www.webfront-js.com/articaldetail/169.html.
  3.读取文件时,文件可能已经上传完,也有可能已经上传一部分要进行读取上传剩余部分,此时需要调用读取文件接口,由后端返回已经上传的文件片,已经完整上传的文件返回上传完成标识.

1. List item

   
   

   4.对于文件所分片数及每片大小,可以自己根据系统使用环境网络好坏自己定义,选择最合适大小,而所分片需要放进数组,因为后端在读取文件接口返回时给返回已上传的片数组.
   let chunkSize = 1024 * 1024 * 2; // 每片大小,此处分2M
   let chunks = Math.ceil(fileObj.size / chunkSize);
   let chunList = []; // 文件所分总片数放入数组
   for (let o = 0; o < chunks; o++) {
   chunList.push(o);
   }
   let currentChunk = 0; // 当前片
   let chunkLength = 0; // 文件分片长度
   5. 读取已上传文件块,通过数组去重,得到还未上传的文件块,调用上传接口进行上传
   上传文件使用 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/upload 中方法进行上传文件的处理
   
   文件上传进度条也可根据XMLHttpRequest.upload.onprogress方法来获取文件上传进度
   
   6.以上方法需在el-upload中定义
   
   根据以上代码和说明,可以实现文件的分片上传和断点续传操作
   下面是需要定义的参数
   
   而最后文件上传完成后删除根据后端定义删除接口传必要参数即可,需要注意的是,文件上传中进行删除操作,此时需要调用on-progress方法获取删除节点dom调用删除接口,
   
   而删除使用的是el-upload中的befor-remove方法,在删除前调用,当删除接口出现错误时,返回false,此时可以保持页面上的文件不丢失.
   以下就是个人在项目中所使用到的文件分片上传和断点续传功能.欢迎大家指正