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

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 算法，计算出固定长度的输入值，进行判断

实战解析

Copy

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);
}
}



{{ msg }}



count is {{ count }}
比较



.read-the-docs {
color: #888;
}


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

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