vue3利用spark-md5计算文件的md5值

前言

先要安装spark-md5包：
import SparkMD5 from ‘spark-md5’

---

一、spark-md5是什么？

看官网：https://github.com/search?q=spark-md5

二、如何计算

1.小文件

对于小文件来说通常直接读取其文本文件（字符串），计算其md5。

      var sparkMD5 = new SparkMD5()
      var reader = new FileReader()
      reader.readAsText(file)
      reader.onload = (event) => {
        //获取文件MD5
        str.value = event.target.result
        sparkMD5.append(str.value)
        md5.value = sparkMD5.end()
       }

2.大文件

对于大文件，如果直接readAsText读取，速度则会非常慢，甚至浏览器崩溃，遂利用readAsArrayBuffer(file)读取其二进制来计算md5。

      var sparkMD52 = new SparkMD5.ArrayBuffer()
      var reader2 = new FileReader()
      reader2.readAsArrayBuffer(file)
      reader2.onload = (event) => {
        //获取文件MD5
        str.value = event.target.result
        sparkMD52.append(str.value)
        md5.value = sparkMD52.end() 
      }

如若需要分片，则对大文件先进行切片，再计算首尾两片首字母加密的md5：

      //切片
      //获取切片数量chunknum.value，文件总大小file.size，切片大小chunkSize.value
      chunknum.value = Math.ceil(file.size / chunkSize.value)
      var sparkMD5 = new SparkMD5.ArrayBuffer()
      //利用文件首尾分片的md5拼接作为整个文件md5
      for (let i = 0; i < chunknum.value; i++) {
        var reader = new FileReader()
        let park = file.slice(i * chunkSize.value, (i + 1) * chunkSize.value)
        chunkArry.value.push(park)
        if (i == 0) {
          reader.readAsArrayBuffer(park)
          reader.onload = (event) => {
            str.value = event.target.result.slice(0, 1) + str.value
          }
        }
        if (i == chunknum.value - 1) {
          reader.readAsArrayBuffer(park)
          reader.onload = (event) => {
            //获取第一片和最后一片切片的首字母加密MD5
            str.value = event.target.result.slice(0, 1) + str.value
            sparkMD51.append(str)
            md5.value = sparkMD51.end()
          }
        }
      }

总结

注意：reader.onload是一个异步函数，其计算的结果在函数外“暂时”是拿不到的，一般在文件上传完过后是能拿得到的。
综上所述，不管什么文件都可以用readAsArrayBuffer来读取其二进制，速度较快。