封装el-upload大文件分片上传、断点续传组件

分片上传原理

其原理其实就是在客户端将文件分割成多个小的分片,然后再将这些分片一片一片的上传给服务端,服务端拿到所有分片后再将这些分片合并起来还原成原来的文件。
那服务端怎么知道我合并出来的文件是否和服务端上传的文件完全一样呢?这就需要用到文件的MD5值了。
文件的MD5值就相当于是这个文件的“数字指纹”,只有当两个文件内容完全一样时,他们的MD5值才会一样。所以在上传文件前,客户端需要先计算出文件的MD5值,并且把这MD5值传递给服务端。服务端在合并出文件后,在计算合并出的文件的MD5值,与客户端传递过来的进行比较,如果一致,则说明上传成功,若不一致,则说明上传过程中可能出现了丢包,上传失败。

准备工作

1、安装 spark-md5

npm install spark-md5

2、文件解析放在util/util.js

export function fileParse(file, type = "base64") {
  return new Promise(resolve => {
      let fileRead = new FileReader();
      if (type === "base64") {
          fileRead.readAsDataURL(file);
      } else if (type === "buffer") {
          fileRead.readAsArrayBuffer(file);
      }
      fileRead.onlo

你可能感兴趣的:(vue,elementUI,音视频通信,echarts实战,前端,vue.js,spark)