FileReader().readAsArrayBuffer(file) 结果在首次加载文件后卡住

Question

我正在使用此代码生成一个 md5 哈希字符串用作我存储中的文件名。我读取文件（图像）内容并使用 md5 库计算哈希值。

在我读取第一个文件后，FileReader() API 的方法 readAsArrayBuffer(file) 的结果不知何故卡住了。

代码沙盒: https://codesandbox.io/s/file-reader-md5so-nem6v

如果我将读取方法更改为 readAsText(file)，结果似乎很正常，并且我得到了不同文件的不同哈希值。但有人告诉我 readAsArrayBuffer() 对图像文件更有意义。这就是我使用它的原因。

会发生什么？我需要清除一些缓冲区吗？

奇怪行为的GIF：

编辑： 原来你需要从 ArrayBuffer 创建一个类型化数组来处理 readAsArrayBuffer()

的结果

发件人：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer

The ArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer.

It is an array of bytes, often refered to in other languages as a "byte array".

You cannot directly manipulate the contents of an ArrayBuffer; instead, you create one of the typed array objects or a DataView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import md5 from "md5";

import "./styles.css";

function App() {
  const [images, setImages] = useState([{ md5Hash: null }, { md5Hash: null }]);

  function onFileSelect(event, index) {
    console.log("onFileSelect...");
    generateHashAndSave(event.target.files[0], index);
  }

  function generateHashAndSave(file, index) {
    console.log("Generate Hash...");
    const reader = new FileReader();
    reader.onload = event => {
      setImages(prevState => {
        const aux = Array.from(prevState);
        aux[index].md5Hash = md5(event.target.result);
        return aux;
      });
    };
    reader.readAsArrayBuffer(file);
  }

  const inputItems = images.map((item, index) => (
    <input
      key={index}
      type="file"
      onChange={event => onFileSelect(event, index)}
      accept=".jpg,.jpeg,.png,.gif"
    />
  ));

  return (
    <React.Fragment>
      {inputItems}
      <div><b>File 1 md5Hash: </b>{images[0].md5Hash}</div>
      <div><b>File 2 md5Hash: </b>{images[1].md5Hash}</div>
    </React.Fragment>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

我不是 100% 确定发生了什么，但是 看起来 像是您正在使用的 md5() 库有问题。如果你显式地将 ArrayBuffer 实例变成 Uint8Array 那么事情并不奇怪：

  aux[index].md5Hash = md5(new Uint8Array(event.target.result));

对不同的图像给出不同的哈希值。

您的 md5() 可能实际上并不期望 ArrayBuffer 参数，所以在那种情况下，我想它并不是真正的 "bug"。

FileReader().readAsArrayBuffer(file) 结果在首次加载文件后卡住

FileReader().readAsArrayBuffer(file) result gets stuck after first loaded file

javascript

browser

filereader

arraybuffer

reactjs