当前位置：首页 > React

react 上传文件如何拿到文件

2026-03-11 09:56:11React

获取上传文件的几种方法

在React中获取上传的文件可以通过以下几种方式实现，具体取决于使用的文件输入元素类型和需求。

使用原生input元素

通过input元素的type="file"可以创建一个文件上传控件。在React中，可以通过onChange事件获取用户选择的文件。

const FileUpload = () => {
  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];
    console.log(selectedFile);
  };

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

使用第三方库

如果需要更复杂的文件上传功能，可以使用第三方库如react-dropzone或react-uploader。这些库提供了拖放上传、文件预览等功能。

import { useDropzone } from 'react-dropzone';

const FileDropzone = () => {
  const { acceptedFiles, getRootProps, getInputProps } = useDropzone();

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>拖放文件到此处或点击选择文件</p>
      <ul>
        {acceptedFiles.map(file => (
          <li key={file.name}>{file.name}</li>
        ))}
      </ul>
    </div>
  );
};

处理多个文件

如果需要上传多个文件，可以通过设置input元素的multiple属性，并在事件处理函数中遍历files数组。

const MultipleFileUpload = () => {
  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} />
  );
};

文件预览

对于图片文件，可以通过FileReader对象实现预览功能。

const ImagePreview = () => {
  const [preview, setPreview] = useState(null);

  const handleImageChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setPreview(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImageChange} />
      {preview && <img src={preview} alt="预览" style={{ maxWidth: '100%' }} />}
    </div>
  );
};

上传到服务器

获取文件后，通常需要将其上传到服务器。可以使用FormData对象和fetch或axios发送文件。

react 上传文件如何拿到文件

const UploadToServer = () => {
  const handleUpload = async (event) => {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
      const result = await response.json();
      console.log(result);
    } catch (error) {
      console.error('上传失败:', error);
    }
  };

  return <input type="file" onChange={handleUpload} />;
};