所选文件数组中的文件使用 CryptoJS 进行 md5 加密始终给出相同的 md5 值

Question

在我的 Vuejs 前端中，有一个文件上传按钮。当用户选择文件时，Vuejs 触发 @change event.I 使用了文件 reader 并且我导入了 Cryptojs 库，我已将其下载为节点模块（在 npm 中）。

import cryptoJs from '../../node_modules/crypto-js'
import md5 from '../../node_modules/crypto-js/md5'

我的html文件上传按钮代码如下：

<input type="file" ref="uploadedfile" name="file1" id="file1" @change="handleFileUpload">

@change 函数内的文件 reader 代码：

handleFileUpload(e){

const filesToRead = e.target.files;
//getting the first file from the files array
let file1 = filesToRead[0];

const fileReader = new FileReader();

fileReader.addEventListener('loadend', (evt) => {

      if (evt.target.readyState == FileReader.DONE) {
        file1 = fileReader.result;
        const encryptedvalue = md5(cryptoJs.enc.Latin1.parse(file1)).toString();
        console.log("MD5 value is :");
        console.log(encryptedvalue);
      }
      
    });
}

但我总是得到相同的 md5 值，尽管我选择了不同的文件。

在文件对象数组中，当我通过Chrome开发者工具的控制台检查时，我也可以看到所有文件相关数据。（如果我控制台日志如下）

console.log(file1);

Answer 1

发布的代码缺少加载数据的调用。这可能只是一个 copy/paste 错误。由于使用 Latin1 (aka ISO 8859-1) encoder, FileReader.readAsBinaryString() 解析数据是一种合适的方法，例如：

handleFileUpload(e) {
  const filesToRead = e.target.files;
  let file1 = filesToRead[0];
  const fileReader = new FileReader();
  fileReader.addEventListener('loadend', (evt) => {
    if (evt.target.readyState == FileReader.DONE) {
      file1 = fileReader.result;
      const encryptedvalue = md5(cryptoJs.enc.Latin1.parse(file1)).toString();
      console.log("MD5 value is :");
      console.log(encryptedvalue);
    }      
  });
  fileReader.readAsBinaryString(file1); // missing in the posted code
}

但是，我无法用这段代码重现问题，无论是本地还是在线https://codesandbox.io/s/brave-fast-cx9gz（如果在在线情况下显示错误消息 C is undefined，这通常可以通过注释掉和在 components/Repro 中的两个 CryptoJS 导入行中消除 - 不知道为什么会发生这种情况。

但是，当使用 FileReader.readAsArrayBuffer() 加载数据时，我可以重现该问题。如果 ArrayBuffer 然后用 Latin1 编码器解析（如发布的代码），这与此不兼容，那么对于 different 文件总是 same 哈希结果。如果 WordArray 是直接从 ArrayBuffer 创建的，结果再次正确：

const encryptedvalue = md5(cryptoJs.lib.WordArray.create(file1)).toString();

所选文件数组中的文件使用 CryptoJS 进行 md5 加密始终给出相同的 md5 值

File in selected file array md5 encryption with CryptoJS always gives the same md5 value

html

javascript

file-upload

cryptojs

vue.js