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 需要放在回調函數中。 它解決了我的問題。