react读取文件字节

要在React中读取文件字节，可以使用HTML5的File API。可以通过一个<input type="file">元素来获取用户选择的文件，然后使用FileReader对象来读取文件内容。

以下是一个简单的例子：

import React, { useState } from 'react';

function FileByteReader() {
  const [byteArray, setByteArray] = useState(null);

  function handleFileSelect(event) {
    const file = event.target.files[0];

    const reader = new FileReader();
    reader.onload = (event) => {
      const arrayBuffer = event.target.result;
      const byteArray = new Uint8Array(arrayBuffer);
      setByteArray(byteArray);
    };
    reader.readAsArrayBuffer(file);
  }

  return (
    <div>
      <input type="file" onChange={handleFileSelect} />
      {byteArray && (
        <div>
          <p>File size: {byteArray.length} bytes</p>
          <p>File content: {byteArray.join(',')}</p>
        </div>
      )}
    </div>
  );
}

export default FileByteReader;

在上面的代码中，我们定义了一个`FileByteReader`组件，它包含一个<input type="file">元素和一个状态变量`byteArray`，用于存储读取到的字节数组。当用户选择文件时，我们使用`FileReader`对象读取文件内容，然后将其转换为`Uint8Array`类型的字节数组，并将其存储在状态变量`byteArray`中。

注意，由于读取文件是一个异步操作，因此我们使用`onload`事件处理程序来处理读取完成后的结果。在`onload`事件处理程序中，我们首先将文件内容转换为`ArrayBuffer`类型的数据，然后将其转换为`Uint8Array`类型的字节数组，并将其存储在状态变量`byteArray`中。

最后，我们在组件中渲染`byteArray`变量的值，以显示读取到的文件字节数组。