大视频上传 分片及显示进度 vue

封装一个js文件
/*
 * @Descripttion: 
 * @version: 
 * @Author: xumingcai
 * @Date: 2020-04-15 17:58:03
 * @LastEditors: xumingcai
 * @LastEditTime: 2020-04-20 16:22:45
 */
import SparkMD5 from 'spark-md5';
import axios, { CancelToken, Cancel} from 'axios';
import { getToken } from '@/core/auth.js';

/**
 * 默认配置
 */
var DEFAULT_OPTIONS = {
  url: '',    // 上传地址
  chunkSize: 2 * 1024 * 1024,  // 分块大小
  retryCount: 5,  // 上传失败重试次数
};
/**
 * 状态集合
 */
export var STATE = {
  PREPARE: 0,               // 预备上传
  HASH_CALC_ING: 1001,      // hash值计算中
  HASH_CALC_FAILED: 1002,   // hash值计算失败
  HASH_CALC_SUCCESS: 1003,  // hash值计算成功
  UPLOAD_ING: 2001,          // 上传中
  UPLOAD_CANCEL: 2002,      // 已取消上传
  UPLOAD_STOP: 2003,        // 上传停止
  UPLOAD_FAILED: 2004,      // 上传失败
  UPLOAD_SUCCESS: 2005,     // 上传成功
};

/**
 * 事件类型
 */
var EVENT_TYPES = {
  ERROR: 'error'
};

/**
 * 获取字符串
 * @param {*} o 非字符串
 */
var toString = o => Object.prototype.toString.call(o);

/**
 * 对象数组转数组
 * @param {Object} o 对象数组o
 */
var toArray = o => [].slice.call(o, 0);

/**
 * 获取文件md5加密
 * @param {*} file 文件
 */
export function getFileMd5 (file) {
  if (!file) return Promise.reject(new Error('文件不存在'));
  const blobSlice =
    File.prototype.slice ||
    File.prototype.mozSlice ||
    File.prototype.webkitSlice;
  const chunkSize = 2097152;
  const chunks = Math.ceil(file.size / chunkSize);
  let currentChunk = 0;
  const spark = new SparkMD5.ArrayBuffer();
  const fileReader = new FileReader();
  return new Promise(function (resolve, reject) {
    function loadNext () {
      var start = currentChunk * chunkSize;
      var end = start + chunkSize >= file.size ? file.size : start + chunkSize;
      fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
    }
    fileReader.onload = function (e) {
      spark.append(e.target.result);
      currentChunk += 1;
      if (currentChunk < chunks) {
        loadNext();
      } else {
        resolve(spark.end());
      }
    };
    fileReader.onerror = function (error) {
      reject(error);
    };
    loadNext();
  });
}

/**
 * 分片上传异常类
 * @param {string} message 异常信息
 */
export function ShardUploadError (message, code, stack) {
  this.name = 'ShardUploadError';
  this.code = code || 1;
  this.message = message || '上传失败';
  this.stack = stack || (new Error()).stack;
}

// 继承
ShardUploadError.prototype = Object.create(Error.prototype);
ShardUploadError.prototype.constructor = ShardUploadError;

// 继承异常code
Object.assign(ShardUploadError, {
  FILE_HASH_CALC_FAILED: 1002,        // 文件hash值计算异常
  FILE_CHUNK_UPLOAD_FAILED: 3001,     // 文件块上传失败
  FILE_UPLOAD_FAILED: 2004,           // 上传失败
  FILE_UPLOAD_CORRUPTION: -303,       // 文件上传损坏
  FILE_SPLICING_FAILED: -302,         // 服务器文件上传成功拼接失败
  PARAMETER_ERROR: 4001,              // 参数错误
  CANCEL_FAILED: 5001,                // 取消失败
});

/**
 * 处理参数为正常
 * @param {number} value 参数值
 * @param {number} defaultValue 默认值
 */
function normalizeInteger (value, defaultValue) {
  value = parseInt(value);
  if (isNaN(value)) { // 不是数字
    value = defaultValue;
  }
  return value;
}

/**
 * 分片上传类
 * @param {File} file 文件对象
 * @param {Object} options 配置
 */
export function ShardUpload (file, options = {}) {
  // 非new创建对象
  if (!(this instanceof ShardUpload)) return new ShardUpload(file, options);

  // 校验文件
  if (!file || !(file instanceof File)) throw new ShardUploadError('请传入File对象'