在 React 中访问上传的文件-js教程-PHP中文网

在 React 中访问上传的文件

碧海醫心

发布： 2025-09-27 20:22:01

原创

360人浏览过

在 react 中访问上传的文件

本文将帮助你理解如何在 React 应用中访问用户上传的文件，重点在于正确处理 onChange 事件，以及如何利用 event.target.files 对象获取文件信息。通过示例代码和详细解释，你将学会如何在组件中获取并存储上传的文件，并了解处理异步更新状态时的注意事项。

获取上传的文件

在 React 中，处理文件上传通常涉及使用 <input type="file"> 元素。当用户选择文件后，可以通过监听 onChange 事件来获取文件信息。event.target.files 是一个 FileList 对象，它包含了用户选择的所有文件。

示例代码：

import React, { useState } from 'react';
import Button from '@mui/material/Button';
import UploadIcon from '@mui/icons-material/Upload';

function Upload({ onUpload }) {
  return (
    <div>
      <input
        style={{ display: 'none' }}
        id="upload-raw-files"
        multiple
        type="file"
        onChange={onUpload}
      />
      <label htmlFor="upload-raw-files">
        <Button
          variant="contained"
          component="span"
          size="large"
          className="Upload"
          startIcon={<UploadIcon />}
          sx={{
            width: '130px',
            height: '40px',
            background: '#5985F7',
            border: '3px solid #5985F7',
          }}
        >
          Upload
        </Button>
      </label>
    </div>
  );
}

const Form = () => {
  const [filepath, setFilepath] = useState([]);

  const handleUpload = (event) => {
    setFilepath(event.target.files);
    console.log("Files will be:", event.target.files);
  };

  return (
    <div>
      <Upload onUpload={handleUpload} />
      {/* 其他表单元素 */}
    </div>
  );
};

export default Form;

登录后复制

代码解释：

Upload 组件： 这是一个简单的上传按钮组件，它隐藏了原生的 <input type="file"> 元素，并使用 Material-UI 的 Button 组件作为触发器。
Form 组件： 这个组件包含状态 filepath，用于存储上传的文件。handleUpload 函数是 onChange 事件的处理函数。
handleUpload 函数： 当用户选择文件后，handleUpload 函数会被调用。event.target.files 包含了用户选择的文件列表。我们使用 setFilepath 更新状态，并将 event.target.files 的值打印到控制台。

注意事项：

event.target.files 是一个 FileList 对象，它不是一个真正的数组。你可以使用 Array.from(event.target.files) 或扩展运算符 [...event.target.files] 将其转换为数组。
setFilepath 是一个异步操作。这意味着在 setFilepath 调用后立即打印 filepath 的值可能不会反映最新的状态。你应该在组件重新渲染后查看 filepath 的值。
在生产环境中，你可能需要将文件上传到服务器。这通常涉及使用 FormData 对象和 fetch 或 axios 等 HTTP 客户端。

状态更新的时机

在 React 中，状态更新是异步的。这意味着当你调用 setFilepath 时，状态不会立即更新。如果你想在状态更新后执行某些操作，可以使用 useEffect Hook。

电子手机配件网站源码1.0

电子手机配件网站源码是一个响应式的织梦网站模板，软件兼容主流浏览器，且可以在PC端和手机端中进行浏览。模板包含安装说明，并包含测试数据。本模板基于DEDECms 5.7 UTF-8设计，需要GBK版本的请自己转换。模板安装方法：1、下载最新的织梦dedecms5.7 UTF-8版本。2、解压下载的织梦安装包，得到docs和uploads两个文件夹，请将uploads里面的所有文件和文件夹上传到你的

查看详情

示例代码：

import React, { useState, useEffect } from 'react';
import Button from '@mui/material/Button';
import UploadIcon from '@mui/icons-material/Upload';

function Upload({ onUpload }) {
  return (
    <div>
      <input
        style={{ display: 'none' }}
        id="upload-raw-files"
        multiple
        type="file"
        onChange={onUpload}
      />
      <label htmlFor="upload-raw-files">
        <Button
          variant="contained"
          component="span"
          size="large"
          className="Upload"
          startIcon={<UploadIcon />}
          sx={{
            width: '130px',
            height: '40px',
            background: '#5985F7',
            border: '3px solid #5985F7',
          }}
        >
          Upload
        </Button>
      </label>
    </div>
  );
}

const Form = () => {
  const [filepath, setFilepath] = useState([]);

  const handleUpload = (event) => {
    setFilepath(event.target.files);
  };

  useEffect(() => {
    console.log("Filepath updated:", filepath);
  }, [filepath]);

  return (
    <div>
      <Upload onUpload={handleUpload} />
      {/* 其他表单元素 */}
    </div>
  );
};

export default Form;

登录后复制

代码解释：