时间戳

首页 > 解决方案 > 如何清除 FileReader() 缓冲区的内容？

javascript - 如何清除 FileReader() 缓冲区的内容？

问题描述

我有一个 HTML 文件上传器，它onChange具有查找我上传的文件的 SHA256 哈希的功能。我的问题是，如果我选择一个新文件，它似乎正在“构建”缓冲区的内容（因此返回除了第一个文件之外的每个上传文件的错误哈希值）。这是正在发生的事情的一个例子。每个文件按顺序选择：

one.txt returns 6b86b273ff34fce19d6b804eff5a3f5747ada4eaa22f1d49c01e52ddb7875b4b (correct)
two.txt returns 1e5e6cdb24208b723fa1631b107613cb1084c202a3b48fc6e3ddf9d458adf5ea
one.txt returns 2ebc9be2494f13b2ec93f578bea1002be847c7fad8a5bf27ddd674547121a284

我试图将缓冲区放入一个状态，并使用该状态来查找哈希。希望每次重新加载 DOM（通过调用onChange()函数）时，我都会得到一个新的缓冲区。要么我做错了，要么它不起作用。这是完整的代码，有什么想法吗？

import React, { Component } from "react";

const crypto = require("crypto");
const hash = crypto.createHash("sha256");

class SearchPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hashOutput: "",
      files: null,
    };
  }

  onChange(e) {
    let files = e.target.files;
    let reader = new FileReader();
    this.setState({ fileName: files[0].name });
    this.setState({ files: files[0] }, () => {
      reader.readAsArrayBuffer(this.state.files);
    });
    console.log(this.state.files);

    reader.onload = e => {
      hash.update(Buffer.from(e.target.result));
      const hashOutput = hash.digest("hex");
      this.setState({ hashOutput });
      console.log(hashOutput);
    };
  }

  render() {
    return (
        <div onSubmit={this.onFormSubmit}>
          <input type="file" name="file" onChange={e => this.onChange(e)} />
        </div>
    );
  }
}

标签： javascriptreactjsfilereader

解决方案

从顶部删除 const 哈希并尝试以下操作：

onChange(e, hash) {
let files = e.target.files;
let reader = new FileReader();
this.setState({ fileName: files[0].name });
this.setState({ files: files[0] }, () => {
  reader.readAsArrayBuffer(this.state.files);
});
console.log(this.state.files);

reader.onload = e => {
  hash.update(Buffer.from(e.target.result));
  const hashOutput = hash.digest("hex");
  this.setState({ hashOutput });
  console.log(hashOutput);
  };
}

render() {
return (
    <div onSubmit={this.onFormSubmit}>
      <input type="file" name="file" onChange={e => 
      this.onChange(e, 
      crypto.createHash("sha256"))} />
    </div>
    );
   }
  }

推荐阅读