前端vue上传时获取文件的md5哈希值

在飘着呢6751

已于 2023-12-20 11:40:32 修改

阅读量1.1k

点赞数 7

文章标签： vue.js 前端哈希算法

于 2023-12-20 09:38:20 首次发布

本文链接：https://blog.csdn.net/honghongzZ/article/details/135099858

版权

项目有一个新的需求,上传文件之前先获取文件hash值传给后端进行校验,看看文件是否已经上传识别过,避免重复上传识别资源浪费..前端采用的vue3+vite.以下是实现方式.(vue2应该同样适用)

使用spark-md5组件

npm install spark-md5 --save

引入组件使用

import SparkMD5 from "spark-md5";

使用组件进行计算哈希值

  //以下获取文件哈希值方法
  var fileReader = new FileReader();
  var spark = new SparkMD5.ArrayBuffer();
  // 获取文件二进制数据
  fileReader.readAsArrayBuffer(file);
  fileReader.onload =(e: any)=>{
    spark.append(e.target.result);
    var fileHash = spark.end();
    console.log(fileHash,"文件哈希值");
  };
//

页面上传中的代码,我是用的element的上传组件的方法