大家好，今天我们来接触一个库

crypto-js #

在这里插入图片描述
没错，上面是有道翻译的截图，为了我们得到的信息更权威，这个库是用来加密的，但介绍是说，已经停止维护，但并不影响我们在前端项目中的使用，所以学学也没有坏处

应用场景#

判断图片是否相同：这个是我最近的需求，借此机会我顺便学习了一些关于文件一些知识点，下面分享给大家，学习之前我们最好先要知道的一些概念.
什么是 FileReader

MD5（Message-Digest Algorithm 5，消息摘要算法第 5 版）是一种被广泛使用的密码哈希函数，它可以产生出一个 128 位（16 字节）的哈希值，通常表示为 32 个十六进制数字。MD5 的设计是为了让不同的输入数据产生不同的哈希值，并且理论上无法从哈希值反向推导出原始数据。
然而，值得注意的是，MD5 算法在密码学应用中已经被认为是不安全的，因为它存在碰撞（collision）的弱点。

SHA-256（Secure Hash Algorithm 256-bit）是一种密码学哈希函数，属于 SHA-2（安全散列算法 2 系列）哈希函数家族的一部分。SHA-256 算法可以将任意长度的数据块计算出一个固定长度的输出值，该输出值通常是 256 位（32 字节）。
总的来说，SHA-256 是一种安全、可靠且广泛应用的哈希算法，它提供了一种高效的方法来验证数据的完整性和一致性。如需更多关于 SHA-256 的信息，建议查阅密码学相关书籍或咨询该领域的专家。

是的这三个知识点是我们判断相同图片所需要清楚的概念，我们要做的可以分为三个步骤：

控件获取文件信息
fileReader 读取文件，转成文件 buffer
crypto 算法，计算出固定长度的输入值，进行判断

实战解析#

<script setup lang="ts">
import { ref } from 'vue'
import CryptoJS from 'crypto-js' //4.2.0

defineProps<{ msg: string }>()

const count = ref(0)
const file1 = ref()
const file2 = ref()

function onFileChange1(e:any) {
  const files = e.target.files;
  if (files && files.length) {
    file1.value = files[0]
  }
}
function onFileChange2(e:any) {
  const files = e.target.files;
  if (files && files.length) {
    file2.value = files[0]
  }
}
async function calculateFileHash(file:any) {  
  return new Promise((resolve, reject) => {  
    // 读取文件的buffer
    const reader = new FileReader();  
    reader.onload = (e:any) => {
      // 需要将ArrayBuff 转换成 WorkArray 才能被 SHA256计算
      const wa = CryptoJS.lib.WordArray.create(e.target.result);
      resolve(CryptoJS.SHA256(wa).toString());  
    };  
    reader.onerror = error => reject(error);  
    reader.readAsArrayBuffer(file);  
  });  
}

async function compareFiles() {  
  try {  
    const [file1r, file2r] = await Promise.all(  
      [file1.value,file2.value].map((file:any) => calculateFileHash(file))  
    );
    console.log('%c [ file1r, file2r ]-39', 'font-size:13px; background:pink; color:#bf2c9f;', file1r == file2r)
  } catch (error) {  
    console.error('计算文件哈希时出错:', error);  
  }  
}
</script>

<template>
  <h1>{{ msg }}</h1>
  <input type="file" @change="onFileChange1" ref="fileInput" />
  <input type="file" @change="onFileChange2" ref="fileInput" />

  <button type="button" @click="count++">count is {{ count }}</button>
  <button type="button" @click="compareFiles">比较</button>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

const wa = CryptoJS.lib.WordArray.create(e.target.result);
CryptoJS.SHA256(wa).toString()

核心是这里面的俩个方法，大家有兴趣额可以自己试试，需要先转为 wa 才能被计算，以上来自我个人的实践，谢谢支持

大家好，今天我们来接触一个库

crypto-js#

应用场景#

实战解析#

crypto-js #