vue2.X分片上传

最新推荐文章于 2024-08-16 17:23:21 发布
最新推荐文章于 2024-08-16 17:23:21 发布
阅读量437 收藏 1
点赞数
分类专栏： vue 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43861689/article/details/128854371
版权

前言

场景：vue2.X使用ant design vue UI框架实现大文件分片上传，小于5MB普通上传，大于5MB用分片上传。
接口有五个（请查看五：接口文件）：
1.断点续传-初始化接口 initMultiPartUpload
2.断点续传-分片文件上传接口 uploadPartFile
3.断点续传-查询分片上传信息接口 listMultipart
4.断点续传-合并分片文件接口 mergeMultipartUpload

效果图：在这里插入图片描述
初始化的接口：
在这里插入图片描述
查询接口：在这里插入图片描述
上传接口：
在这里插入图片描述
合并的接口：
在这里插入图片描述
在这里插入图片描述

一：封装解析文件md5的方法

spark-md5.js

(function (factory) {
  if (typeof exports === 'object') {
    // Node/CommonJS
    module.exports = factory()
  } else if (typeof define === 'function' && define.amd) {
    // AMD
    define(factory)
  } else {
    // Browser globals (with support for web workers)
    var glob

    try {
      glob = window
    } catch (e) {
      glob = self
    }

    glob.SparkMD5 = factory()
  }
}(function (undefined) {

  'use strict'

  /*
   * Fastest md5 implementation around (JKM md5).
   * Credits: Joseph Myers
   *
   * @see http://www.myersdaily.org/joseph/javascript/md5-text.html
   * @see http://jsperf.com/md5-shootout/7
   */

  /* this function is much faster,
    so if possible we use it. Some IEs
    are the only ones I know of that
    need the idiotic second function,
    generated by an if clause.  */
  var add32 = function (a, b) {
      return (a + b) & 0xFFFFFFFF
    },
    hex_chr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']


  function cmn(q, a, b, x, s, t) {
    a = add32(add32(a, q), add32(x, t))
    return add32((a << s) | (a >>> (32 - s)), b)
  }

  function md5cycle(x, k) {
    var a = x[0],
      b = x[1],
      c = x[2],
      d = x[3]

    a += (b & c | ~b & d) + k[0] - 680876936 | 0
    a = (a << 7 | a >>> 25) + b | 0
    d += (a & b | ~a & c) + k[1] - 389564586 | 0
    d = (d << 12 | d >>> 20) + a | 0
    c += (d & a | ~d & b) + k[2] + 606105819 | 0
    c = (c << 17 | c >>> 15) + d | 0
    b += (c & d | ~c & a) + k[3] - 1044525330 | 0
    b = (b << 22 | b >>> 10) + c | 0
    a += (b & c | ~b & d) + k[4] - 176418897 | 0
    a = (a << 7 | a >>> 25) + b | 0
    d += (a & b | ~a & c) + k[5] + 1200080426 | 0
    d = (d << 12 | d >>> 20) + a | 0
    c += (d & a | ~d & b) + k[6] - 1473231341 | 0
    c = (c << 17 | c >>> 15) + d | 0
    b += (c & d | ~c & a) + k[7] - 45705983 | 0
    b = (b << 22 | b >>> 10) + c | 0
    a += (b & c | ~b & d) + k[8] + 1770035416 | 0
    a = (a << 7 | a >>> 25) + b | 0
    d += (a & b | ~a & c) + k[9] - 1958414417 | 0
    d = (d << 12 | d >>> 20) + a | 0
    c += (d & a | ~d & b) + k[10] - 42063 | 0
    c = (c << 17 | c >>> 15) + d | 0
    b += (c & d | ~c & a) + k[11] - 1990404162 | 0
    b = (b << 22 | b >>> 10) + c | 0
    a += (b & c | ~b & d) + k[12] + 1804603682 | 0
    a = (a << 7 | a >>> 25) + b | 0
    d += (a & b | ~a & c) + k[13] - 40341101 | 0
    d = (d << 12 | d >>> 20) + a | 0
    c += (d & a | ~d & b) + k[14] - 1502002290 | 0
    c = (c << 17 | c >>> 15) + d | 0
    b += (c & d | ~c & a) + k[15] + 1236535329 | 0
    b = (b << 22 | b >>> 10) + c | 0

    a += (b & d | c & ~d) + k[1] - 165796510 | 0
    a = (a << 5 | a >>> 27) + b | 0
    d += (a & c | b & ~c) + k[6] - 1069501632 | 0
    d = (d << 9 | d >>> 23) + a | 0
    c += (d & b | a & ~b) + k[11] + 643717713 | 0
    c = (c << 14 | c >>> 18) + d | 0
    b += (c & a | d & ~a) + k[0] - 373897302 | 0
    b = (b << 20 | b >>> 12) + c | 0
    a += (b & d | c & ~d) + k[5] - 701558691 | 0
    a = (a << 5 | a >>> 27) + b | 0
    d += (a & c | b & ~c) + k[10] + 38016083 | 0
    d = (d << 9 | d >>> 23) + a | 0
    c += (d & b | a & ~b) + k[15] - 660478335 | 0
    c = (c << 14 | c >>> 18) + d | 0
    b += (c & a | d & ~a) + k[4] - 405537848 | 0
    b = (b << 20 | b >>> 12) + c | 0
    a += (b & d | c & ~d) + k[9] + 568446438 | 0
    a = (a << 5 | a >>> 27) + b | 0
    d += (a & c | b & ~c) + k[14] - 1019803690 | 0
    d = (d << 9 | d >>> 23) + a | 0
    c += (d & b | a & ~b) + k[3] - 187363961 | 0
    c = (c << 14 | c >>> 18) + d | 0
    b += (c & a | d & ~a) + k[8] + 1163531501 | 0
    b = (b << 20 | b >>> 12) + c | 0
    a += (b & d | c & ~d) + k[13] - 1444681467 | 0
    a = (a << 5 | a >>> 27) + b | 0
    d += (a & c | b & ~c) + k[2] - 51403784 | 0
    d = (d << 9 | d >>> 23) + a | 0
    c += (d & b | a & ~b) + k[7] + 1735328473 | 0
    c = (c << 14 | c >>> 18) + d | 0
    b += (c & a | d & ~a) + k[12] - 1926607734 | 0
    b = (b << 20 | b >>> 12) + c | 0

    a += (b ^ c ^ d) + k[5] - 378558 | 0
    a = (a << 4 | a >>> 28) + b | 0
    d += (a ^ b ^ c) + k[8] - 2022574463 | 0
    d = (d << 11 | d >>> 21) + a | 0
    c += (d ^ a ^ b) + k[11] + 1839030562 | 0
    c = (c << 16 | c >>> 16) + d | 0
    b += (c ^ d ^ a) + k[14] - 35309556 | 0
    b = (b << 23 | b >>> 9) + c | 0
    a += (b ^ c ^ d) + k[1] - 1530992060 | 0
    a = (a << 4 | a >>> 28) + b | 0
    d += (a ^ b ^ c) + k[4] + 1272893353 | 0
    d = (d << 11 | d >>> 21) + a | 0
    c += (d ^ a ^ b) + k[7] - 155497632 | 0
    c = (c << 16 | c >>> 16) + d | 0
    b += (c ^ d ^ a) + k[10] - 1094730640 | 0
    b = (b << 23 | b >>> 9) + c | 0
    a += (b ^ c ^ d) + k[13] + 681279174 | 0
    a = (a << 4 | a >>> 28) + b | 0
    d += (a ^ b ^ c) + k[0] - 358537222 | 0
    d = (d << 11 | d >>> 21) + a | 0
    c += (d ^ a ^ b) + k[3] - 722521979 | 0
    c = (c << 16 | c >>> 16) + d | 0
    b += (c ^ d ^ a) + k[6] + 76029189 | 0
    b = (b << 23 | b >>> 9) + c | 0
    a += (b ^ c ^ d) + k[9] - 640364487 | 0
    a = (a << 4 | a >>> 28) + b | 0
    d += (a ^ b ^ c) + k[12] - 421815835 | 0
    d = (d << 11 | d >>> 21) + a | 0
    c += (d ^ a ^ b) + k[15] + 530742520 | 0
    c = (c << 16 | c >>> 16) + d | 0
    b += (c ^ d ^ a) + k[2] - 995338651 | 0
    b = (b << 23 | b >>> 9) + c | 0

    a += (c ^ (b | ~d)) + k[0] - 198630844 | 0
    a = (a << 6 | a >>> 26) + b | 0
    d += (b ^ (a | ~c)) + k[7] + 1126891415 | 0
    d = (d << 10 | d >>> 22) + a | 0
    c += (a ^ (d | ~b)) + k[14] - 1416354905 | 0
    c = (c << 15 | c >>> 17) + d | 0
    b += (d ^ (c | ~a)) + k[5] - 57434055 | 0
    b = (b << 21 | b >>> 11) + c | 0
    a += (c ^ (b | ~d)) + k[12] + 1700485571 | 0
    a = (a << 6 | a >>> 26) + b | 0
    d += (b ^ (a | ~c)) + k[3] - 1894986606 | 0
    d = (d << 10 | d >>> 22) + a | 0
    c += (a ^ (d | ~b)) + k[10] - 1051523 | 0
    c = (c << 15 | c >>> 17) + d | 0
    b += (d ^ (c | ~a)) + k[1] - 2054922799 | 0
    b = (b << 21 | b >>> 11) + c | 0
    a += (c ^ (b | ~d)) + k[8] + 1873313359 | 0
    a = (a << 6 | a >>> 26) + b | 0
    d += (b ^ (a | ~c)) + k[15] - 30611744 | 0
    d = (d << 10 | d >>> 22) + a | 0
    c += (a ^ (d | ~b)) + k[6] - 1560198380 | 0
    c = (c << 15 | c >>> 17) + d | 0
    b += (d ^ (c | ~a)) + k[13] + 1309151649 | 0
    b = (b << 21 | b >>> 11) + c | 0
    a += (c ^ (b | ~d)) + k[4] - 145523070 | 0
    a = (a << 6 | a >>> 26) + b | 0
    d += (b ^ (a | ~c)) + k[11] - 1120210379 | 0
    d = (d << 10 | d >>> 22) + a | 0
    c += (a ^ (d | ~b)) + k[2] + 718787259 | 0
    c = (c << 15 | c >>> 17) + d | 0
    b += (d ^ (c | ~a)) + k[9] - 343485551 | 0
    b = (b << 21 | b >>> 11) + c | 0

    x[0] = a + x[0] | 0
    x[1] = b + x[1] | 0
    x[2] = c + x[2] | 0
    x[3] = d + x[3] | 0
  }

  function md5blk(s) {
    var md5blks = [],
      i /* Andy King said do it this way. */

    for (i = 0; i < 64; i += 4) {
      md5blks[i >> 2] = s.charCodeAt(i) + (s.charCodeAt(i + 1) << 8) + (s.charCodeAt(i + 2) << 16) + (s.charCodeAt(i + 3) << 24)
    }
    return md5blks
  }

  function md5blk_array(a) {
    var md5blks = [],
      i /* Andy King said do it this way. */

    for (i = 0; i < 64; i += 4) {
      md5blks[i >> 2] = a[i] + (a[i + 1] << 8) + (a[i + 2] << 16) + (a[i + 3] << 24)
    }
    return md5blks
  }

  function md51(s) {
    var n = s.length,
      state = [1732584193, -271733879, -1732584194, 271733878],
      i,
      length,
      tail,
      tmp,
      lo,
      hi

    for (i = 64; i <= n; i += 64) {
      md5cycle(state, md5blk(s.substring(i - 64, i)))
    }
    s = s.substring(i - 64)
    length = s.length
    tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    for (i = 0; i < length; i += 1) {
      tail[i >> 2] |= s.charCodeAt(i) << ((i % 4) << 3)
    }
    tail[i >> 2] |= 0x80 << ((i % 4) << 3)
    if (i > 55) {
      md5cycle(state, tail)
      for (i = 0; i < 16; i += 1) {
        tail[i] = 0
      }
    }

    // Beware that the final length might not fit in 32 bits so we take care of that
    tmp = n * 8
    tmp = tmp.toString(16).match(/(.*?)(.{0,8})$/)
    lo = parseInt(tmp[2], 16)
    hi = parseInt(tmp[1], 16) || 0

    tail[14] = lo
    tail[15] = hi

    md5cycle(state, tail)
    return state
  }

  function md51_array(a) {
    var n = a.length,
      state = [1732584193, -271733879, -1732584194, 271733878],
      i,
      length,
      tail,
      tmp,
      lo,
      hi

    for (i = 64; i <= n; i += 64) {
      md5cycle(state, md5blk_array(a.subarray(i - 64, i)))
    }

    // Not sure if it is a bug, however IE10 will always produce a sub array of length 1
    // containing the last element of the parent array if the sub array specified starts
    // beyond the length of the parent array - weird.
    // https://connect.microsoft.com/IE/feedback/details/771452/typed-array-subarray-issue
    a = (i - 64) < n ? a.subarray(i - 64) : new Uint8Array(0)

    length = a.length
    tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    for (i = 0; i < length; i += 1) {
      tail[i >> 2] |= a[i] << ((i % 4) << 3)
    }

    tail[i >> 2] |= 0x80 << ((i % 4) << 3)
    if (i > 55) {
      md5cycle(state, tail)
      for (i = 0; i < 16; i += 1) {
        tail[i] = 0
      }
    }

    // Beware that the final length might not fit in 32 bits so we take care of that
    tmp = n * 8
    tmp = tmp.toString(16).match(/(.*?)(.{0,8})$/)
    lo = parseInt(tmp[2], 16)
    hi = parseInt(tmp[1], 16) || 0

    tail[14] = lo
    tail[15] = hi

    md5cycle(state, tail)

    return state
  }

  function rhex(n) {
    var s = '',
      j
    for (j = 0; j < 4; j += 1) {
      s += hex_chr[(n >> (j * 8 + 4)) & 0x0F] + hex_chr[(n >> (j * 8)) & 0x0F]
    }
    return s
  }

  function hex(x) {
    var i
    for (i = 0; i < x.length; i += 1) {
      x[i] = rhex(x[i])
    }
    return x.join('')
  }

  // In some cases the fast add32 function cannot be used..
  if (hex(md51('hello')) !== '5d41402abc4b2a76b9719d911017c592') {
    add32 = function (x, y) {
      var lsw = (x & 0xFFFF) + (y & 0xFFFF),
        msw = (x >> 16) + (y >> 16) + (lsw >> 16)
      return (msw << 16) | (lsw & 0xFFFF)
    }
  }

  // ---------------------------------------------------

  /**
   * ArrayBuffer slice polyfill.
   *
   * @see https://github.com/ttaubert/node-arraybuffer-slice
   */

  if (typeof ArrayBuffer !== 'undefined' && !ArrayBuffer.prototype.slice) {
    (function () {
      function clamp(val, length) {
        val = (val | 0) || 0

        if (val < 0) {
          return Math.max(val + length, 0)
        }

        return Math.min(val, length)
      }

      ArrayBuffer.prototype.slice = function (from, to) {
        var length = this.byteLength,
          begin = clamp(from, length),
          end = length,
          num,
          target,
          targetArray,
          sourceArray

        if (to !== undefined) {
          end = clamp(to, length)
        }

        if (begin > end) {
          return new ArrayBuffer(0)
        }

        num = end - begin
        target = new ArrayBuffer(num)
        targetArray = new Uint8Array(target)

        sourceArray = new Uint8Array(this, begin, num)
        targetArray.set(sourceArray)

        return target
      }
    })()
  }

  // ---------------------------------------------------

  /**
   * Helpers.
   */

  function toUtf8(str) {
    if (/[\u0080-\uFFFF]/.test(str)) {
      str = unescape(encodeURIComponent(str))
    }

    return str
  }

  function utf8Str2ArrayBuffer(str, returnUInt8Array) {
    var length = str.length,
      buff = new ArrayBuffer(length),
      arr = new Uint8Array(buff),
      i

    for (i = 0; i < length; i += 1) {
      arr[i] = str.charCodeAt(i)
    }

    return returnUInt8Array ? arr : buff
  }

  function arrayBuffer2Utf8Str(buff) {
    return String.fromCharCode.apply(null, new Uint8Array(buff))
  }

  function concatenateArrayBuffers(first, second, returnUInt8Array) {
    var result = new Uint8Array(first.byteLength + second.byteLength)

    result.set(new Uint8Array(first))
    result.set(new Uint8Array(second), first.byteLength)

    return returnUInt8Array ? result : result.buffer
  }

  function hexToBinaryString(hex) {
    var bytes = [],
      length = hex.length,
      x

    for (x = 0; x < length - 1; x += 2) {
      bytes.push(parseInt(hex.substr(x, 2), 16))
    }

    return String.fromCharCode.apply(String, bytes)
  }

  // ---------------------------------------------------

  /**
   * SparkMD5 OOP implementation.
   *
   * Use this class to perform an incremental md5, otherwise use the
   * static methods instead.
   */

  function SparkMD5() {
    // call reset to init the instance
    this.reset()
  }

  /**
   * Appends a string.
   * A conversion will be applied if an utf8 string is detected.
   *
   * @param {String} str The string to be appended
   *
   * @return {SparkMD5} The instance itself
   */
  SparkMD5.prototype.append = function (str) {
    // Converts the string to utf8 bytes if necessary
    // Then append as binary
    this.appendBinary(toUtf8(str))

    return this
  }

  /**
   * Appends a binary string.
   *
   * @param {String} contents The binary string to be appended
   *
   * @return {SparkMD5} The instance itself
   */
  SparkMD5.prototype.appendBinary = function (contents) {
    this._buff += contents
    this._length += contents.length

    var length = this._buff.length,
      i

    for (i = 64; i <= length; i += 64) {
      md5cycle(this._hash, md5blk(this._buff.substring(i - 64, i)))
    }

    this._buff = this._buff.substring(i - 64)

    return this
  }

  /**
   * Finishes the incremental computation, reseting the internal state and
   * returning the result.
   *
   * @param {Boolean} raw True to get the raw string, false to get the hex string
   *
   * @return {String} The result
   */
  SparkMD5.prototype.end = function (raw) {
    var buff = this._buff,
      length = buff.length,
      i,
      tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      ret

    for (i = 0; i < length; i += 1) {
      tail[i >> 2] |= buff.charCodeAt(i) << ((i % 4) << 3)
    }

    this._finish(tail, length)
    ret = hex(this._hash)

    if (raw) {
      ret = hexToBinaryString(ret)
    }

    this.reset()

    return ret
  }

  /**
   * Resets the internal state of the computation.
   *
   * @return {SparkMD5} The instance itself
   */
  SparkMD5.prototype.reset = function () {
    this._buff = ''
    this._length = 0
    this._hash = [1732584193, -271733879, -1732584194, 271733878]

    return this
  }

  /**
   * Gets the internal state of the computation.
   *
   * @return {Object} The state
   */
  SparkMD5.prototype.getState = function () {
    return {
      buff: this._buff,
      length: this._length,
      hash: this._hash.slice()
    }
  }

  /**
   * Gets the internal state of the computation.
   *
   * @param {Object} state The state
   *
   * @return {SparkMD5} The instance itself
   */
  SparkMD5.prototype.setState = function (state) {
    this._buff = state.buff
    this._length = state.length
    this._hash = state.hash

    return this
  }

  /**
   * Releases memory used by the incremental buffer and other additional
   * resources. If you plan to use the instance again, use reset instead.
   */
  SparkMD5.prototype.destroy = function () {
    delete this._hash
    delete this._buff
    delete this._length
  }

  /**
   * Finish the final calculation based on the tail.
   *
   * @param {Array}  tail   The tail (will be modified)
   * @param {Number} length The length of the remaining buffer
   */
  SparkMD5.prototype._finish = function (tail, length) {
    var i = length,
      tmp,
      lo,
      hi

    tail[i >> 2] |= 0x80 << ((i % 4) << 3)
    if (i > 55) {
      md5cycle(this._hash, tail)
      for (i = 0; i < 16; i += 1) {
        tail[i] = 0
      }
    }

    // Do the final computation based on the tail and length
    // Beware that the final length may not fit in 32 bits so we take care of that
    tmp = this._length * 8
    tmp = tmp.toString(16).match(/(.*?)(.{0,8})$/)
    lo = parseInt(tmp[2], 16)
    hi = parseInt(tmp[1], 16) || 0

    tail[14] = lo
    tail[15] = hi
    md5cycle(this._hash, tail)
  }

  /**
   * Performs the md5 hash on a string.
   * A conversion will be applied if utf8 string is detected.
   *
   * @param {String}  str The string
   * @param {Boolean} [raw] True to get the raw string, false to get the hex string
   *
   * @return {String} The result
   */
  SparkMD5.hash = function (str, raw) {
    // Converts the string to utf8 bytes if necessary
    // Then compute it using the binary function
    return SparkMD5.hashBinary(toUtf8(str), raw)
  }

  /**
   * Performs the md5 hash on a binary string.
   *
   * @param {String}  content The binary string
   * @param {Boolean} [raw]     True to get the raw string, false to get the hex string
   *
   * @return {String} The result
   */
  SparkMD5.hashBinary = function (content, raw) {
    var hash = md51(content),
      ret = hex(hash)

    return raw ? hexToBinaryString(ret) : ret
  }

  // ---------------------------------------------------

  /**
   * SparkMD5 OOP implementation for array buffers.
   *
   * Use this class to perform an incremental md5 ONLY for array buffers.
   */
  SparkMD5.ArrayBuffer = function () {
    // call reset to init the instance
    this.reset()
  }

  /**
   * Appends an array buffer.
   *
   * @param {ArrayBuffer} arr The array to be appended
   *
   * @return {SparkMD5.ArrayBuffer} The instance itself
   */
  SparkMD5.ArrayBuffer.prototype.append = function (arr) {
    var buff = concatenateArrayBuffers(this._buff.buffer, arr, true),
      length = buff.length,
      i

    this._length += arr.byteLength

    for (i = 64; i <= length; i += 64) {
      md5cycle(this._hash, md5blk_array(buff.subarray(i - 64, i)))
    }

    this._buff = (i - 64) < length ? new Uint8Array(buff.buffer.slice(i - 64)) : new Uint8Array(0)

    return this
  }

  /**
   * Finishes the incremental computation, reseting the internal state and
   * returning the result.
   *
   * @param {Boolean} raw True to get the raw string, false to get the hex string
   *
   * @return {String} The result
   */
  SparkMD5.ArrayBuffer.prototype.end = function (raw) {
    var buff = this._buff,
      length = buff.length,
      tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      i,
      ret

    for (i = 0; i < length; i += 1) {
      tail[i >> 2] |= buff[i] << ((i % 4) << 3)
    }

    this._finish(tail, length)
    ret = hex(this._hash)

    if (raw) {
      ret = hexToBinaryString(ret)
    }

    this.reset()

    return ret
  }

  /**
   * Resets the internal state of the computation.
   *
   * @return {SparkMD5.ArrayBuffer} The instance itself
   */
  SparkMD5.ArrayBuffer.prototype.reset = function () {
    this._buff = new Uint8Array(0)
    this._length = 0
    this._hash = [1732584193, -271733879, -1732584194, 271733878]

    return this
  }

  /**
   * Gets the internal state of the computation.
   *
   * @return {Object} The state
   */
  SparkMD5.ArrayBuffer.prototype.getState = function () {
    var state = SparkMD5.prototype.getState.call(this)

    // Convert buffer to a string
    state.buff = arrayBuffer2Utf8Str(state.buff)

    return state
  }

  /**
   * Gets the internal state of the computation.
   *
   * @param {Object} state The state
   *
   * @return {SparkMD5.ArrayBuffer} The instance itself
   */
  SparkMD5.ArrayBuffer.prototype.setState = function (state) {
    // Convert string to buffer
    state.buff = utf8Str2ArrayBuffer(state.buff, true)

    return SparkMD5.prototype.setState.call(this, state)
  }

  SparkMD5.ArrayBuffer.prototype.destroy = SparkMD5.prototype.destroy

  SparkMD5.ArrayBuffer.prototype._finish = SparkMD5.prototype._finish

  /**
   * Performs the md5 hash on an array buffer.
   *
   * @param {ArrayBuffer} arr The array buffer
   * @param {Boolean}     [raw] True to get the raw string, false to get the hex one
   *
   * @return {String} The result
   */
  SparkMD5.ArrayBuffer.hash = function (arr, raw) {
    var hash = md51_array(new Uint8Array(arr)),
      ret = hex(hash)

    return raw ? hexToBinaryString(ret) : ret
  }

  return SparkMD5
}))

二：封装分片上传的方法文件

sectionUpLoadUtil.js

import {
  mergeMultipartUpload,
  listMultipart,
  uploadPartFile,
  initMultiPartUpload,
} from '@/api/sectionFile.js'
import SparkMD5 from './spark-md5.js'
var chunkSize = 5 * 1024 * 1024 // 1MB一片
var chunkCount = []
var chunkList = [] // 分片列表
var uploaded = [] // 已经上传的
var uploadId = '' //分片上传唯一标识
var uploadPath = ''
var uploadPathSuccess = {
  status: 0,
  message: '',
  url: '',
}
var numbers = 0

/*** 传入文件对象,返回文件生成的HASH值,buffer
 * @param file
 * @returns {Promise<unknown>}
 */
export const changeBuffer = (file) => {
  return new Promise((resolve) => {
    var fileReader = new FileReader()
    fileReader.readAsArrayBuffer(file)
    fileReader.onload = (ev) => {
      var buffer = ev.target.result,
        spark = new SparkMD5.ArrayBuffer(),
        HASH,
        suffix
      spark.append(buffer)
      HASH = spark.end()
      resolve({
        buffer,
        HASH,
      })
    }
  })
}
// 获取md5
function readFileMD5(file, pieceSize, concurrent) {
  return new Promise((resolve, reject) => {
    // 读取视频文件的md5
    changeBuffer(file).then((res) => {
      initMultiPartUpload(file.name, res.HASH, file.size, file.name)
        .then((res) => {
          uploadPath = res.data.uploadPath
          uploadId = res.data.uploadId
          chunkSize = res.data.partSize // 1MB一片
          chunkCount = res.data.partCount // 总片数
          //已上传成功
          if (res.data.done) {
            uploadPathSuccess = {
              status: res.status,
              message: '已上传成功',
              url: res.data.uploadPath,
            }
            resolve({ uploadPathSuccess })
          } else {
            listMultipart(res.data.uploadId)
              .then(async (reslistMultipart) => {
                uploaded = reslistMultipart.data.uploadedPartNums
                //判断已上传了多少
                if (chunkCount == uploaded.length) {
                  _mergeMultipartUpload().then((res) => {
                    uploadPathSuccess = {
                      status: res.status,
                      message: res.message,
                      url: res.url,
                    }
                    resolve({ uploadPathSuccess })
                  })
                } else {
                  var _concurrentUpload = await concurrentUpload(file, pieceSize, concurrent)
                  if (numbers % 3 === 0 && uploaded.length < chunkCount) {
                    _concurrentUpload = await concurrentUpload(file, pieceSize, concurrent)
                  }
                  //如果上传成功
                  if (_concurrentUpload.status === 0) {
                    await _mergeMultipartUpload().then((res) => {
                      uploadPathSuccess = {
                        status: res.status,
                        message: res.message,
                        url: res.url,
                      }
                    })
                  }
                  resolve({ uploadPathSuccess })
                }
              })
              .catch((err) => {
                uploadPathSuccess = {
                  status: 1,
                  message: 'listMultipart查询分片上传信息接口报错:' + err.message,
                  url: '',
                }
                resolve({ uploadPathSuccess })
              })
          }
        })
        .catch((e) => {
          uploadPathSuccess = {
            status: 1,
            message: e.message,
            url: '',
          }
          reject(uploadPathSuccess)
        })
    })
  })
}
/***
 * 获取每一个分片的详情
 **/
export const getChunkInfo = (file, currentChunk, chunkSize) => {
  var start = currentChunk * chunkSize
  var end = Math.min(file.size, start + chunkSize)
  var chunk = file.slice(start, end)
  return {
    start,
    end,
    chunk,
  }
}
/***
 * 针对每个文件进行chunk处理
 **/
export const readChunkMD5 = (file, pieceSize, concurrent) => {
  // 针对单个文件进行chunk上传
  for (var i = 0; i < chunkCount; i++) {
    const { chunk } = getChunkInfo(file, i, chunkSize)

    // 判断已经上传的分片中是否包含当前分片
    if (uploaded.indexOf(i + '') == -1) {
      uploadChunk({
        chunk,
        currentChunk: i,
        chunkCount,
      })
    }
  }
}

/***
 * 并发上传
 **/
export async function concurrentUpload(file, pieceSize, concurrent) {
  chunkList = []
  for (var i = 1; i <= chunkCount; i++) {
    chunkList.push(Number(i))
  }
  chunkList = chunkList.filter((e) => !uploaded.some((item) => item === e))

  await concurrentExecution(chunkList, concurrent, (curItem) => {
    return new Promise((resolve, reject) => {
      const { chunk } = getChunkInfo(file, curItem - 1, chunkSize)
      var chunkInfo = {
        chunk,
        currentChunk: curItem,
        chunkCount,
      }
      var inde = chunkInfo.currentChunk

      if (uploaded.indexOf(inde + '') == -1) {
        // 构建上传文件的formData
        var uploadData = createUploadData(chunkInfo)

        uploadPartFile(uploadData)
          .then(async (res) => {
            numbers++
            uploaded.push(chunkInfo.currentChunk)
            resolve()
          })
          .catch((e) => {
            reject(e)
          })
      }
    })
  })
    .then(async (res) => {
      uploadPathSuccess = {
        status: 0,
        message: '上传成功',
        url: '',
      }
    })
    .catch((err) => {
      uploadPathSuccess = {
        status: 1,
        message: '上传失败',
        url: '',
      }
    })
  return uploadPathSuccess
}
// 合并文件
export const _mergeMultipartUpload = () => {
  return new Promise((resolve, reject) => {
    mergeMultipartUpload(uploadPath, uploadId)
      .then((res) => {
        uploadPathSuccess = {
          status: res.status,
          message: '上传成功',
          url: uploadPath,
        }
        resolve(uploadPathSuccess)
      })
      .catch((err) => {
        uploadPathSuccess = {
          status: err.status,
          message: err.message,
          url: '',
        }
        resolve(uploadPathSuccess)
      })
  })
}
/***
 * 创建文件上传参数
 **/
export const createUploadData = (chunkInfo) => {
  var fetchForm = new FormData()
  fetchForm.append('file', chunkInfo.chunk)
  fetchForm.append('filePath', uploadPath)
  fetchForm.append('partSize', chunkInfo.chunk.size)
  fetchForm.append('partNumber', chunkInfo.currentChunk)
  fetchForm.append('uploadId', uploadId)
  return fetchForm
}

/**
 * 文件分片上传
 * @params file {File} 文件
 * @params pieceSize {Number} 分片大小 默认3MB
 * @params concurrent {Number} 并发数量 默认2
 * @params process {Function} 进度回调函数
 * @params success {Function} 成功回调函数
 * @params error {Function} 失败回调函数
 */
export const uploadByPieces = (file, pieceSize = 5, concurrent = 3) => {
  return new Promise((resolve, reject) => {
    file = file
    numbers = 0
    readFileMD5(file, pieceSize, concurrent).then((res) => {
      resolve(res)
    })
  })
}

/**
 * 并发执行
 * @params list {Array} - 要迭代的数组
 * @params limit {Number} - 并发数量控制数,最好小于3
 * @params asyncHandle {Function} - 对`list`的每一个项的处理函数，参数为当前处理项，必须 return 一个Promise来确定是否继续进行迭代
 * @return {Promise} - 返回一个 Promise 值来确认所有数据是否迭代完成
 */
export function concurrentExecution(list, limit, asyncHandle) {
  // 递归执行
  var recursion = (arr) => {
    // 执行方法 arr.shift() 取出并移除第一个数据
    return asyncHandle(arr.shift()).then(() => {
      // 数组还未迭代完，递归继续进行迭代
      if (arr.length !== 0) {
        return recursion(arr)
      } else {
        return 'finish'
      }
    })
  }
  // 创建新的并发数组
  var listCopy = [].concat(list)
  // 正在进行的所有并发异步操作
  var asyncList = []
  limit = limit > listCopy.length ? listCopy.length : limit
  while (limit--) {
    asyncList.push(recursion(listCopy))
  }
  // 所有并发异步操作都完成后，本次并发控制迭代完成
  return Promise.all(asyncList)
}

三：定义一个公共方法

util.js

// 防抖函数
export function debounce(fn, delay = 300) {
  //默认300毫秒
  var timer
  return function () {
    var args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, args) // this 指向vue
    }, delay)
  }
}

四：使用断点续传方法的页面

<template>
  <div>
    <a-upload :customRequest="customRequest" :file-list="fileList" @change="handleUploadChange" :accept="uploadAccept">
      <a-button v-if="fileList.length < 1"> <a-icon :type="loading ? 'loading' : 'plus'" /> 上传文件 </a-button>
    </a-upload>
  </div>
</template>

<script>
import { debounce } from '@/utils/util'
import { uploadByPieces, concurrentExecution } from '@/utils/sectionUpLoadUtil'
export default {
  data() {
    return {
      //文件
      fileList: [],
      //上传的格式
      uploadAccept: '',
        //上传的loading
      loading: false,
      //上传文件的地址
      action:'',
    }
  },
  methods:{
        //上传文件(限制只允许上传一个文件)
    async handleUploadChange(info) {
    //   if (!fileTypes.test(info.file.name.toLowerCase())) {
    //     // 格式根据自己需求定义
    //     this.$message.error('上传格式不正确，请上传' + this.uploadTitle)
    //     return false
    //   }
      if (info.file.status == 'removed') {
        //主动删除文件
        // this.btnLoading = false
      }

      let fileList = [...info.fileList]
      fileList = fileList.slice(-1)
      fileList = fileList.map((file) => {
        if (file.response) {
          file.url = file.response.url
        }
        return file
      })
      this.fileList = fileList
      if (this.fileList[0]?.response?.status == 0) {
        //上传成功
        // this.btnLoading = false
      }
    },
        // 图片上传的api
    uploadFile(parameter) {
      return request({
        url: this.action,
        method: 'post',
        headers: { 'Content-Type': 'multipart/form-data' },
        data: parameter,
        timeout: 1000 * 60 * 10,
      })
    },
        // 自定义上传，可以自定义上传接口，不用通过action属性，还是非常灵活的
    customRequest: debounce(async function (file) {
      //同时只能处理一个文件上传
      await concurrentExecution(this.fileList, 1, (curItem) => {
        return new Promise(async (resolve) => {
          //如果小于5MB则走老接口  反之走断点续传
          if (curItem.size / 1024 / 1024 > 5) {
            await uploadByPieces(curItem.originFileObj).then((res) => {
              if (res.uploadPathSuccess.status !== 0) {
                file.onError()
                file.status = 'error'
                this.$message.warning(res.uploadPathSuccess.message)
                return
              }
              const fileObj = file.file
              // 调用组件内方法, 设置为成功状态
              file.onSuccess(
                {
                  status: 0,
                  data: {
                    downloadPath: process.env.VUE_APP_MINIO_PROXY_KEY + '/' + res.uploadPathSuccess.url,
                    size: fileObj.size,
                    suffix: fileObj.name.substring(fileObj.name.lastIndexOf('.') + 1),
                  },
                },
                file
              )
              file.status = 'done'
              resolve()
            })
          } else {
            // file 是上传的文件 其内容会在放在下面
            // 后端需要接受的参数是 formData数据，
            const form = new FormData()
            form.append('file', file.file)
            // uploadFile
            this.uploadFile(form)
              .then((res) => {
                // 调用组件内方法, 设置为成功状态
                file.onSuccess(res, file)
                file.status = 'done'
                resolve()
              })
              .catch((err) => {
                file.onError()
                file.status = 'error'
                if (err.message != "Cannot read properties of undefined (reading 'status')") {
                  this.$message.error(err.message)
                } else {
                  this.$message.error('上传超时，请求失败!')
                }
                resolve()
              })
          }
        })
      })
    }, 500),
  },
}
</script>
<style lang="less" scoped>
</style>

五：接口文件

sectionFile.js

// 切片断点续传调用接口
import { request } from '@/utils/request'

const fileApi = {
  initMultiPartUpload: '/micro/file/minio/initMultiPartUpload', //断点续传-初始化接口
  uploadPartFile: '/micro/file/minio/uploadPartFile', // 断点续传-分片文件上传接口
  listMultipart: '/micro/file/minio/listMultipart', // 断点续传-查询分片上传信息接口
  mergeMultipartUpload: '/micro/file/minio/mergeMultipartUpload', //断点续传-合并分片文件接口
  abortMultipartUpload: '/micro/file/minio/abortMultipartUpload', // 断点续传-取消/中止分片上传接口

  listMultipartUploadId: '/micro/file/minio/listMultipart/', // 断点续传-根据文件uploadId查询文件上传状态接口
}
/**
 *断点续传-根据文件uploadId查询文件上传状态接口
 * @param {*} uploadId  分片上传唯一标识
 * 这个接口一般不用
 * @returns
 */
export const listMultipartUploadId = (uploadId) => {
  return request({
    url: fileApi.listMultipartUploadId + '/' + uploadId,
    method: 'post',
    // baseURL: '/mock',
  })
}
/**
 * 断点续传-取消/中止分片上传接口
 * @param {*} filePath  文件上传路径 上传文件到minio的路径，无需拼接桶位
 * @param {*} uploadId  分片上传唯一标识
 * @returns
 */
export const abortMultipartUpload = (filePath, uploadId) => {
  return request({
    url: fileApi.abortMultipartUpload + '?filePath=' + filePath + '&uploadId=' + uploadId,
    method: 'get',
    // baseURL: '/mock',
  })
}
/**
 *  断点续传-合并分片文件接口
 * @param {*} filePath  文件上传路径 上传文件到minio的路径，无需拼接桶位
 * @param {*} uploadId  分片上传唯一标识
 * @returns
 */
export const mergeMultipartUpload = (filePath, uploadId) => {
  return request({
    url: fileApi.mergeMultipartUpload,
    method: 'post',
    data: {
      uploadId,
      filePath,
    },
    // baseURL: '/mock',
  })
}
/**
 *  断点续传-查询分片上传信息接口
 * @param {*} filePath  文件上传路径 上传文件到minio的路径，无需拼接桶位
 * @param {*} uploadId  分片上传唯一标识
 * @returns
 */
export const listMultipart = (uploadId) => {
  return request({
    url: fileApi.listMultipart + '/' + uploadId,
    method: 'post',
    // baseURL: '/mock',
  })
}
/**
 * 断点续传-分片文件上传接口
 * @param {*} file  分片文件
 * @param {*} filePath  文件上传路径 上传文件到minio的路径，无需拼接桶位
 * @param {*} partSize  当前分片大小
 * @param {*} partNumber  当前分片序号
 * @param {*} uploadId  分片上传唯一标识
 * @returns
 */
export const uploadPartFile = (data) => {
  return request({
    url: fileApi.uploadPartFile,
    method: 'post',
    data,
    // responseType: 'blob',
    processData: false, // 告诉jQuery不要去处理发送的数据
    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
    headers: {
      'content-type': 'multipart/form-data; ',
    },
    timeout: 1000 * 60 * 10,
    // baseURL: '/mock',
  })
}
/**
 * 断点续传-初始化接口
 * @param {*} name  文件名称
 * @param {*} md5  文件MD5
 * @param {*} size  文件大小
 * @param {*} localPath  文件在电脑本地绝对路径
 * @returns
 */
export const initMultiPartUpload = (name, md5, size, localPath) => {
  return request({
    url: fileApi.initMultiPartUpload,
    method: 'post',
    data: {
      name: name,
      md5: md5,
      size: size,
      localPath: localPath,
    },
    // baseURL: '/mock',
  })
}

六：注意点

1.process.env.VUE_APP_MINIO_PROXY_KEY是定义在.env文件里的minio地址ip的全局常量
2.因为页面使用SparkMD5跟npm有冲突，所以存了一份SparkMD5的js文件，以本地引用的方法引入
3.断点续传根据接口实际业务去变化，我这边由于后端定了文件上传的步骤，导致前端被动接受
4.本文限制 文件名相同以及md5相同则判断视为同一个文件
5.本文限制一次性同时上传3个分片，分片可以用户自定义

鱼干～
关注
专栏目录
Vue文件分片上传
m0_51431448的博客
11-20 4920
在开发中，如果上传的文件过大，可以考虑分片上传，分片就是说将文件拆分来进行上传，将各个文件的切片传递给后台，然后后台再进行合并。这里切片可以理解为字符串的截取，那这里文件的话就是切分字节，一个道理上传的时候，可能会需要一个文件的唯一 标识，在上传文件的时候也要将文件的唯一标识（文件的MD5加密文件的字符串，每个文件的唯一标识）传递给后端，后端会通过该标识返回给我们告诉我们这个文件是否已经上传过，没有这个文件就需要我们全部上传，存在了，前端就不需要再上传，这个文件上传了一部分，需要把剩余的上传。
Vue中实现视频的分片上传
热门推荐
只如初见0706的博客
11-19 1万+
1、选择本地视频，获取视频实体 第一步：:auto-upload="false"；:on-change="videoSaveToUrl" <el-upload drag action :auto-upload="false" :on-change="videoSaveToUrl" :a...
VUE+大文件分片上传
alisky119的博客
04-01 205
网上搜了一圈，基本上都是用的HTML5实现的，也就是chrome提供的API，小文件还好，比如几十MB，500MB左右的话，单个文件上传还凑合，但是文件大点，文件一多就不行了。所以要求提供技术支持服务，数据库用了MySQL，达梦，要求提供前端，后端，控件源代码，需要提供手机，QQ，微信，邮箱等联系方式，需要提供7*24小时技术支持服务，需要提供文档教程，视频教程，远程技术指导。接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表。
VUE2实现文件分片上传/续传
最新发布
alisky119的博客
08-16 925
最近这块好像挻火的，今天早上又有一位网友加我微信，也是想了解这块的技术和方案，实际上我的微信之前就已经在网上公开了，但是论坛里面很多网友还是不知道。昨天晚上论坛里面有一个网友发私信给我，想和我探讨一下这方面的技术问题，他是刚开始接触这块，以前没怎么接触过，都是做的后端，主要是以数据库操作为主，他也是最近接的一个项目，遇到了大文件上传下载的问题，问我有没有好用的组件，其它的要求没有，主要就是好用，方便。
【vue2+js】通过js实现大文件分片上传和合并上传
js_wwj的博客
01-19 1623
通过js实现大文件分片上传和合并上传
vue2 + el-upload 组合下的多数据分片上传
qq_45599738的博客
04-01 396
vue2 + el-upload 组合下的多数据分片上传。
Vue分片上传
chentianchengBUG的博客
04-12 484
浏览网上资料分片上传，试了很多种 webuploader element分片上传 最后使用vue-simple-uploader 完成上传 <template> <divclass="hello"> <divv-if="showVideoPath!=null"> <video:src="showVideoPath"class="avatarvideo-avatar"width="400px"controls...
vue2.x+Element 实现大文件切片上传
weixin_45661272的博客
03-04 3064
vue2.x+Element 实现大文件切片上传功能要求效果 功能要求 支持切片上传； 支持并发上传； 支持显示上传进度； <template> <div> <el-row> <el-upload :http-request="upload" :action="uploadUrl" :data="uploadData" :before-remove="beforeRemove
Vue 前端分片上传文件到 阿里 oss
weixin_44233560的博客
05-09 2374
vue前端切片上传文件到阿里oss 准备工作，前端上传oss跨域，前端上传文件到oss指定文件夹，上传文件到oss，oss分片上传
vue 自定义分片上传到七牛云带进度条
Rainy_X的博客
06-28 1262
前言 场景：vue环境，UI框架为Ant Design Ant Design中的Upload自带上传功能，但是当我上传超过1G的视频文件时，导致文件过大而超时 于是设置customRequest属性，通过覆盖默认的上传行为，可以自定义自己的上传实现 引入七牛SDK 直接使用静态文件地址：https://unpkg.com/qiniu-js@<version>/dist/qiniu.min.js 使用 NPM 安装 npm install qiniu-js， import * as qiniu
vue + python实现大文件分片上传功能
一键写代码的博客
08-29 1155
vue 、 element-ui和python（django）实现大文件分片上传功能
Vue.Js及Java实现文件分片上传代码实例
10-15
主要介绍了Vue.Js及Java实现文件分片上传代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
[vue2]基于vue-simple-upload的文件分片上传组件
SCUhzs
06-06 1051
[vue2]基于vue-simple-upload的文件分片上传组件
上传200G文件
Mr_Zang666的博客
08-16 3666
最近遇见一个需要上传百G大文件的需求，调研了七牛和腾讯云的切片分段上传功能，因此在此整理前端大文件上传相关功能的实现。 在某些业务中，大文件上传是一个比较重要的交互场景，如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大，或者网络条件不好时，上传的时间会比较长（要传输更多的报文，丢包重传的概率也更大），用户不能刷新页面，只能耐心等待请求完成。 下面从文件上传方式入手，整理...
vue2实现文件分片上传/续传
weixin_68658847的博客
05-18 588
vue2实现文件分片上传/续传
vue实现分片上传
AIfurture的博客
01-14 4118
前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现分片上传、秒传以及断点续传的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于vue-simple-uploade...
Vue—大文件分片上传
HJHxHJH的博客
10-12 506
至此文件分片上传的功能已经开发完毕，基于上述代码其实还可以实现文件秒传、断点续传和失败重试功能。
Vue2.x响应式原理详解
Vue2.x版本的响应式原理是其核心特性之一，它使得数据模型与视图之间能够自动保持同步。在创建Vue实例时，传递给`data`的对象会被 Vue 遍历，其中的每一个属性都会通过`Object.defineProperty`方法转换为 getter 和 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值