CryptoJS 为不同的文件创建相同的哈希值

Question

我正在使用 CryptoJS 创建上传文件的哈希值。但是，我上传的所有文件都产生相同的哈希值。我知道问题出在我的“onFileChange”调用中，但我不确定我在这里做错了什么。任何帮助将不胜感激。

import React, { Component } from 'react'; 
import { connect } from 'react-redux';
import '../CSS/FileSelectorCSS.css';
var CryptoJS = require("crypto-js");

class FileSelectorComponent extends Component {

    state = {

        // Initially, no file is selected 
        selectedFile: null
    };

    // On file select (from the pop up) 
    onFileChange = event => {
        var text = '';
        // Update the state 
        this.setState({ selectedFile: event.target.files[0] });

        var reader = new FileReader();

        reader.onloadend = function () {
            text = (reader.result);
        }

        reader.readAsBinaryString(event.target.files[0]);

        var hash = CryptoJS.MD5(CryptoJS.enc.Latin1.parse(text));

        console.log(hash.toString());
    };

    // File content to be displayed after 
    // file upload is complete 
    fileData = () => {

        if (this.state.selectedFile) {

            return (
                <div>
                    <h2>File Details:</h2>
                    <p>File Name: {this.state.selectedFile.name}</p>
                    <p>File Type: {this.state.selectedFile.type}</p>
                    <p>
                        Last Modified:{" "}
                        {this.state.selectedFile.lastModifiedDate.toDateString()}
                    </p>
                </div>
            );
        } 
    };

    render() {

        return (
            <div>
                <div>
                    <input type="file" onChange={this.onFileChange} />
                </div>
                {this.fileData()}
            </div>
        );
    }
}

导出默认连接()(FileSelectorComponent);

期望值：

Answer 1

  // On file select (from the pop up) 
onFileChange = event => {
    var text = '';
    // Update the state 
    this.setState({ selectedFile: event.target.files[0] });
    console.log(event.target.files[0]);
    var reader = new FileReader();

    reader.onloadend = function () {
        text = (reader.result);
        var hash = CryptoJS.MD5(CryptoJS.enc.Latin1.parse(text));
        console.log(hash.toString());
    }

    reader.readAsBinaryString(event.target.files[0]);

    //console.log(text);
   

    //console.log(hash.toString());
};

CryptoJS需要放在回调函数里面。它解决了我的问题。

Answer 2

您在 reader 加载之前计算哈希值。

散列“d41d8cd98f00b204e9800998ecf8427e”是空字符串的 MD5 散列。

有行：

reader.onloadend = function () {
  text = (reader.result);
}

表示text变量会在reader加载完成后赋值给text变量，异步。但是到那个时候，剩下的函数已经执行完了。

所以你需要确保这个过程发生在 text 变量获得它的新值之后，像这样：

reader.onloadend = function () {
  text = (reader.result);

  reader.readAsBinaryString(event.target.files[0]);
  var hash = CryptoJS.MD5(CryptoJS.enc.Latin1.parse(text));
  console.log(hash.toString());
}

CryptoJS 为不同的文件创建相同的哈希值

CryptoJS creates the same hash value for different files

javascript

cryptojs