plUpload分片上传

主页面

多文件上传组件部分

file-md5.js

'use strict'
import SparkMD5 from 'spark-md5'
export default function (file, callback) {
  console.log(file.size, '分片处理')
  var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
  var chunkSize = 10485760 // Read in chunks of 2MB
  var chunks = Math.ceil(file.size / chunkSize)
  var currentChunk = 0
  var spark = new SparkMD5.ArrayBuffer()
  var fileReader = new FileReader()

  fileReader.onload = function (e) {
    console.log('read chunk nr', currentChunk + 1, 'of', chunks)
    spark.append(e.target.result) // Append array buffer
    currentChunk++

    if (currentChunk < chunks) {
      loadNext()
    } else {
      callback(null, spark.end())
      console.log('finished loading')
    }
  }

  fileReader.onerror = function () {
    callback('oops, something went wrong.')
  }

  function loadNext() {
    var start = currentChunk * chunkSize
    var end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize

    fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
  }

  loadNext()
}

效果图

分片上传.png