廢話不多說，直接上代碼雹姊，有問題直接提問

<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>點(diǎn)擊上傳</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: {
    // 計(jì)算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
        //注意點(diǎn)，網(wǎng)上都是 這一步都是有問題的生兆， 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()
            //計(jì)算后的結(jié)果
          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>