react 如何读取文件上传

2026-01-24 13:21:07React

读取文件上传的方法

在React中读取上传的文件通常通过<input type="file">元素结合事件处理实现。以下是几种常见方法：

react 如何读取文件上传

使用原生JavaScript File API

通过onChange事件获取文件对象，利用FileReader读取内容：

react 如何读取文件上传

function FileUpload() {
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      console.log(e.target.result); // 文件内容
    };
    reader.readAsText(file); // 或 readAsDataURL/readAsArrayBuffer
  };

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

使用第三方库（如react-dropzone）

对于拖拽上传等复杂场景，可以使用专门库简化操作：

import { useDropzone } from 'react-dropzone';

function DropzoneUpload() {
  const { getRootProps, getInputProps } = useDropzone({
    onDrop: (acceptedFiles) => {
      acceptedFiles.forEach(file => {
        const reader = new FileReader();
        reader.onload = () => {
          console.log(reader.result);
        };
        reader.readAsDataURL(file);
      });
    }
  });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>拖拽文件到此处或点击选择</p>
    </div>
  );
}

处理二进制文件（如图片预览）

通过readAsDataURL实现图片预览功能：

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

  const handleImageChange = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = () => setPreview(reader.result);
    reader.readAsDataURL(file);
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImageChange} />
      {preview && <img src={preview} alt="预览" width="200" />}
    </div>
  );
}