vue上传文件分片断点续传 --源码---记录

<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>

    <!-- PROGRESS -->

    <div class="progress">

      <span>上传进度：{ { total | totalText }}%</span>

      <el-link

        type="primary"

        v-if="total > 0 && total < 100"

        @click="handleBtn"

        >{ { btn | btnText }}</el-link

      >

    </div>

    <!-- VIDEO -->

    <div class="uploadImg" v-if="video">

      <video :src="video" controls />

    </div>

  </div>

</template>

<script>

import { fileParse } from "./assets/utils";

import axios from "axios";

import SparkMD5 from "spark-md5";

export default {

  name: "App",

  data() {

    return {

      total: 0,       //上传进度条

      video: null,    //存储地址path

      btn: false,     //暂停和开始按钮

    };

  },

  filters: {

    btnText(btn) {