前端crypto-js, 文件加密，判断相同文件、图片（MD5,SHA256)

文章目录

前情提要
应用场景
实战解析
最后

前情提要

在这里插入图片描述
大家好，今天我们来接触一个库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