ElementUI+Vue 计算文件上传的md5

废话不多说，直接上代码，有问题直接提问

<template>
  <el-dialog title="添加图片"
             :visible.sync="visible"
             width="500px">
    <div class="upload-card">
      <el-upload drag
                 action=""
                 :file-list="fileList"
                 :on-change="handleChange"
                 :show-file-list="false"
                 accept="image/png,image/jpg,image/jpeg">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>
  </el-dialog>
</template>

<script>
import SparkMD5 from 'spark-md5'
export default {
  name: 'md5-image-dialog',
  props: {
  },
  data () {
    return {
      visible: false,
      fileList: []
    }
  },
  methods: {
    // 计算md5
    handleChange (file, fileList) {
      const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
      const fileReader = new FileReader()
      const chunkSize = 2097152
      const chunks = Math.ceil(file.size / chunkSize)
      let currentChunk = 0
        //注意点，网上都是 这一步都是有问题的， SparkMD5.ArrayBuffer() 
      const spark = new SparkMD5.ArrayBuffer()
      fileReader.onload = function (e) {
        spark.append(e.target.result)
        currentChunk++
        if (currentChunk < chunks) {
          loadNext()
        } else {
          const sparkEnd = spark.end()
            //计算后的结果
          console.log('computed hash', sparkEnd)
        }
      }
      fileReader.onerror = function () {
        console.warn('FileReader error.')
      }
      function loadNext () {
        const start = currentChunk * chunkSize
        const end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize
        // 注意这里的 fileRaw
        fileReader.readAsArrayBuffer(blobSlice.call(file.raw, start, end))
      }
      loadNext()
    }
  }
}
</script>

<style lang="sass" scoped>
.upload-card
  display: flex
  justify-content: center
</style>