在react js中使用filereader读取多个文件

import React, { useState } from 'react';

function FileReaderComponent() {
  const [files, setFiles] = useState([]);

  const handleFileChange = (event) => {
    const fileList = event.target.files;
    const newFiles = [];

    for (let i = 0; i < fileList.length; i++) {
      const file = fileList[i];
      const reader = new FileReader();

      reader.onload = (e) => {
        const fileContent = e.target.result;
        newFiles.push({
          name: file.name,
          size: file.size,
          type: file.type,
          content: fileContent,
        });

        if (newFiles.length === fileList.length) {
          setFiles(newFiles);
        }
      };

      reader.readAsText(file);
    }
  };

  return (
    <div>
      <input type="file" multiple onChange={handleFileChange} />
      {files.map((file, index) => (
        <div key={index}>
          <h4>File: {file.name}</h4>
          <p>Size: {file.size} bytes</p>
          <p>Type: {file.type}</p>
          <p>Content:</p>
          <pre>{file.content}</pre>
        </div>
      ))}
    </div>
  );
}

export default FileReaderComponent;

import React from 'react';
import FileReaderComponent from './FileReaderComponent';

function App() {
  return (
    <div>
      <h1>File Reader Example</h1>
      <FileReaderComponent />
    </div>
  );
}

export default App;