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拼接作为整个文件md5for(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来读取其二进制，速度较快。