vue2实现文件分片上传/续传

源代码github地址：
https://github.com/zjoney/large-file-breakpoint-upload-about-vue
b站视频：
https://www.bilibili.com/video/BV18v411v7Xu/?spm_id_from=333.337.search-card.all.click&vd_source=54b92ea953eb0a7281545e66410fc2f5

两种上传文件方式一种分片和续传

工具包

/assets/utils.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.onload = (ev) => {
   
            resolve(ev.target.result);
        };
    });
};

第一种文件上传（直接上传文件，这里的文件都以图片为例）

<template>
  <div id="app">
    <!-- 
      action:存放的是文件上传到服务器的接口地址
    -->
    <el-upload
      drag
      action="/single1"
      :show-file-list="false"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
    </el-upload>

    <!-- IMG -->
    <div class="uploadImg" v-if="img">
      <img :src="img" alt />
    </div>
  </div>
</template>

<script>
/*
 * 文件上传有两套方案：
 *   1. 基于文件流（form-data）  element-ui上传组件默认是基于文件流的
 *   2. 客户端需要把文件转化为BASE64
 *
 * 默认上传
 *   格式：multipart/form-data
 *   数据格式：form-data
 *      file 文件流信息
 *      filename 文件名字
 *   上传成功后获取服务器返回信息，通知on-success回调函数执行
 * 内部封装了ajax
 */
export default {
     
  name: "App",
  data() {
     
    return {
     
      img: null,
    };
  },
  methods: {
     
    handleSuccess(result) {
     
      if (result.code == 0) {
     
        this.img = result.path;
      }
    },
    beforeUpload(file) {
     
      // 格式校验
      let {
      type, size } = file;

      if (!/(png|gif|jpeg|jpg)/i.test(type)) {
     
        this.$message("文件合适不正确~~");
        return false;
      }

      if (size > 200 * 1024 * 1024) {
     
        this.$message("文件过大，请上传小于200MB的文件~~");
        return false;
      }

      return true;
    },
  },
};
</script>

第二种文件上传（上传文件的buffer格式(图片可以base64格式)，这里的文件都以图片为例）

<template>
  <div id="app">
    <el-upload drag action :auto-upload="false" :show-file-list="false" :on-change="changeFile">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
    </el-upload>

    <!-- IMG -->
    <div class="uploadImg" v-show="img">
      <img :src="img"