大家好，今天我們來接觸一個庫

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 #