計算檔案的md5；vue計算檔案md5值；計算圖檔的md5值；

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計算方法（大檔案計算很費時 ）：

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>