react 上传文件如何拿到文件

2026-01-25 01:00:26React

获取上传文件的方法

在React中获取上传的文件通常通过<input type="file">元素实现。以下是具体实现方式：

使用onChange事件监听

创建一个受控的文件输入组件，通过onChange事件获取文件对象：

react 上传文件如何拿到文件

function FileUpload() {
  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];
    console.log(selectedFile);
    // 后续处理逻辑
  };

  return (
    <input 
      type="file" 
      onChange={handleFileChange} 
    />
  );
}

使用useRef获取文件

通过React的useRef直接访问DOM元素获取文件：

function FileUpload() {
  const fileInputRef = React.useRef(null);

  const handleSubmit = () => {
    const selectedFile = fileInputRef.current.files[0];
    console.log(selectedFile);
  };

  return (
    <>
      <input 
        type="file" 
        ref={fileInputRef} 
      />
      <button onClick={handleSubmit}>上传</button>
    </>
  );
}

多文件上传处理

当需要上传多个文件时，可以通过multiple属性获取文件列表：

react 上传文件如何拿到文件

function MultiFileUpload() {
  const handleFilesChange = (event) => {
    const files = Array.from(event.target.files);
    files.forEach(file => {
      console.log(file.name, file.size);
    });
  };

  return (
    <input 
      type="file" 
      multiple 
      onChange={handleFilesChange} 
    />
  );
}

文件验证处理

获取文件后通常需要进行类型和大小验证：

function ValidatedUpload() {
  const handleFile = (file) => {
    const validTypes = ['image/jpeg', 'image/png'];
    const maxSize = 2 * 1024 * 1024; // 2MB

    if (!validTypes.includes(file.type)) {
      alert('仅支持JPEG/PNG格式');
      return;
    }

    if (file.size > maxSize) {
      alert('文件大小超过限制');
      return;
    }

    // 验证通过后的处理
  };
}

表单提交处理

在表单提交时获取文件数据：

function FormUpload() {
  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const file = formData.get('file');

    // 使用fetch或axios发送formData
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" name="file" />
      <button type="submit">提交</button>
    </form>
  );
}

以上方法提供了React中获取上传文件的不同实现方式，可根据具体需求选择合适的方法。