REACT使用window.FileReader上传多个文件

React是一个用于构建用户界面的JavaScript库。它提供了一种声明式的编程模型，使开发人员能够轻松构建可复用的组件，并将其组合成强大的用户界面。

window.FileReader是HTML5中的API，用于在浏览器中读取文件内容。它提供了一种异步的方式来读取本地文件，并将其作为数据URL或文本返回给开发人员。

使用window.FileReader上传多个文件的步骤如下：

创建一个React组件，包含一个文件选择输入框和一个上传按钮。

import React, { useState } from 'react';

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

  const handleFileChange = (event) => {
    const selectedFiles = Array.from(event.target.files);
    setFiles(selectedFiles);
  };

  const handleUpload = () => {
    files.forEach((file) => {
      const reader = new FileReader();
      reader.onload = (event) => {
        const fileContent = event.target.result;
        // 在这里可以对文件内容进行处理或上传到服务器
        console.log(fileContent);
      };
      reader.readAsDataURL(file);
    });
  };

  return (
    <div>
      <input type="file" multiple onChange={handleFileChange} />
      <button onClick={handleUpload}>上传</button>
    </div>
  );
}

export default FileUploader;

在handleFileChange函数中，使用event.target.files获取用户选择的文件列表，并将其存储在组件的状态中。
在handleUpload函数中，遍历文件列表，并为每个文件创建一个FileReader实例。然后，将文件内容读取为数据URL，并在onload回调函数中处理文件内容或将其上传到服务器。

需要注意的是，window.FileReader只能在浏览器环境中使用，无法在服务器端运行。

React相关的腾讯云产品和产品介绍链接地址如下：