react如何调用打开文件

2026-03-31 12:39:16React

调用文件选择对话框

在React中，可以通过创建一个隐藏的<input type="file">元素并触发其点击事件来实现文件选择功能。这种方法不依赖第三方库，使用原生HTML5文件API。

const FileInput = () => {
  const fileInputRef = useRef(null);

  const handleButtonClick = () => {
    fileInputRef.current.click();
  };

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

  return (
    <div>
      <button onClick={handleButtonClick}>选择文件</button>
      <input
        type="file"
        ref={fileInputRef}
        onChange={handleFileChange}
        style={{ display: 'none' }}
      />
    </div>
  );
};

处理多个文件选择

如果需要选择多个文件，可以添加multiple属性到input元素，并通过files数组访问所有选择的文件。

<input
  type="file"
  multiple
  onChange={(e) => {
    const files = Array.from(e.target.files);
    files.forEach(file => console.log(file.name));
  }}
/>

文件类型限制

使用accept属性可以限制用户只能选择特定类型的文件。例如，仅允许选择图片文件：

<input
  type="file"
  accept="image/*"
  onChange={(e) => console.log(e.target.files[0])}
/>

使用第三方库

对于更复杂的文件处理需求，可以考虑使用如react-dropzone这样的第三方库，它提供拖放文件上传功能：

import { useDropzone } from 'react-dropzone';

const DropzoneComponent = () => {
  const { getRootProps, getInputProps } = useDropzone({
    onDrop: acceptedFiles => {
      console.log(acceptedFiles);
    }
  });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>拖放文件到这里，或点击选择文件</p>
    </div>
  );
};

文件预览

对于图片文件，可以在选择后立即生成预览：

react如何调用打开文件

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

const handleImageChange = (e) => {
  const file = e.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>
);