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

在读取器加载之前，您正在计算您的哈希值。

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

有几行：

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

意味着当读者完成加载时， 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());
}

Answer 2

  // 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 需要放在回调函数中。 它解决了我的问题。