github链接

1.先下载

npm i browser-md5-file -S

2.在使用的vue页面引入和声明方法

import BMF from 'browser-md5-file'
const bmf = new BMF()

3.使用方法：

function handle(e) {
  const file = e.target.files[0];
  bmf.md5(
    file,
    (err, md5) => {
      console.log('err:', err);
      console.log('md5 string:', md5); // 97027eb624f85892c69c4bcec8ab0f11
    },
    progress => {
      console.log('progress number:', progress);
    },
  );
}

4.终止md5计算方法（大文件计算很费时 ）：

bmf.abort()

5.代码可以直接复制使用：

<template>
  <div>
    <!-- 上传文件 -->
    <!-- multiple  选择多个文件属性 -->
    <input type="file" placeholder-class="input-placeholder" @change="handle">
  </div>
</template>

<script>
// 先下载 npm i browser-md5-file -S
import BMF from 'browser-md5-file'
const bmf = new BMF()
export default {
  data () {
    return {}
  },
  methods: {
    handle (e) {
      // console.log(e)
      const file = e.target.files[0]
      // console.log(file)
      bmf.md5(
        file,
        (err, md5) => {
          console.log('err:', err)
          console.log('md5 string:', md5) // 97027eb624f85892c69c4bcec8ab0f11

          // const formData = new FormData() // 每次失败要重置formdata对象
          // formData.append('file', e.target.files[0])//文件掉接口方式

          // You can abort it before success to md5:中止计算md5--大文件计算很费时
          // bmf.abort()
        },
        progress => {
          console.log('progress number:', progress)
        }
      )
    }
  }
}
</script>

<style></style>