vue3+vue-simple-uploader实现大文件上传

vue-simple-uploader本身是基于vue2实现，如果要使用vue3会报错。如何在vue3中使用，可参考我的另一篇文章：解决vue3中不能使用vue-simple-uploader__Jyann_的博客-CSDN博客

一.实现思路

1. 使用vue-simple-uploader组件的uploader组件，设置自动上传为false，即可开启手动上传。:autoStart=false
2. 设置上传参数options中的数据(target、chunkSize，fileParameterName、maxChunkRetries、testChunks、checkChunkUploadedByResponse、parseTimeRemaining)；
3. 设置testChunk:true组件会自动发起同url地址的get方式进行校验（实现秒传、分片续传、最新上传）
4. 进行MD5计算（使用spark-md5）

二.重点理解

1：如何实现自动校验

uploader组件options参数中设置testChunks就会发送get请求到后端进行校验。需要后端有校验逻辑。

校验规则：

1. 后端根据文件名（可不用）+md5去查找本地或者数据库有没有该文件上传记录，有则已经上传过，返回已上传过标识skipUploader；
2. 如果上传过部分分片，则返回uploadedChunks数组，组件会自动跳过这些已经上传过的分片；
3. 如果以上都没有上传会重新开始上传；

前端发送get请求后，会通过options的参数中checkChunkUploadedByResponse方法进行拦截：

1. 如果skipUpload为true则返回true，不再进行后续操作；
2. 如果uploadedChunks则返回后续的分片，跳过已上传的分片；
3. 如果没有上传过不会进入此方法；

2：如何实现秒传、断点续传、最新上传

后端get请求中校验是否有上传过文件，上传过则秒传，上传过部分分片则断点续传，否则重新上传。

前端通过checkChunkUploadedByResponse获取和设置后端返回的结果

3、MD5计算

1. 首先设置不自动上传:autoStart=false
2. 然后通过FileReader读取文件，及对文件进行切片File.prototype.slice
3. 根据文件大小和分片大小，切片后循环读取文件，并计算MD5
4. 通过spark-md5计算分片的md5

三.代码实现