vue3利用spark-md5计算文件的md5值-Toy模板网

这篇具有很好参考价值的文章主要介绍了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来读取其二进制，速度较快。文章来源地址https://www.toymoban.com/news/detail-574840.html

到了这里，关于vue3利用spark-md5计算文件的md5值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！