React实现浏览文件

2026-01-27 01:02:27React

文件选择基础实现

使用HTML的<input type="file">元素结合React状态管理实现基础文件选择功能：

import { useState } from 'react';

function FileInput() {
  const [selectedFile, setSelectedFile] = useState(null);

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

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {selectedFile && (
        <div>已选择文件: {selectedFile.name}</div>
      )}
    </div>
  );
}

多文件选择支持

通过添加multiple属性允许选择多个文件：

const [files, setFiles] = useState([]);

const handleMultipleFiles = (e) => {
  setFiles([...e.target.files]);
};

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

文件预览功能

使用URL.createObjectURL实现图片预览：

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

const handleImagePreview = (e) => {
  const file = e.target.files[0];
  if (file) {
    setPreview(URL.createObjectURL(file));
  }
};

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

拖放文件上传

实现拖放区域交互效果：

const [dragActive, setDragActive] = useState(false);

const handleDrag = (e) => {
  e.preventDefault();
  e.stopPropagation();
  if (e.type === 'dragenter' || e.type === 'dragover') {
    setDragActive(true);
  } else if (e.type === 'dragleave') {
    setDragActive(false);
  }
};

const handleDrop = (e) => {
  e.preventDefault();
  setDragActive(false);
  if (e.dataTransfer.files && e.dataTransfer.files[0]) {
    setSelectedFile(e.dataTransfer.files[0]);
  }
};

return (
  <div 
    onDragEnter={handleDrag}
    onDragLeave={handleDrag}
    onDragOver={handleDrag}
    onDrop={handleDrop}
    style={{ 
      border: dragActive ? '2px dashed blue' : '2px dashed gray',
      padding: '20px'
    }}
  >
    拖放文件到此处
  </div>
);

文件类型限制

通过accept属性限制可选择的文件类型：

<input 
  type="file" 
  accept=".pdf,.doc,.docx,application/msword" 
/>

自定义样式按钮

隐藏原生输入元素并自定义触发按钮：

const fileInputRef = useRef();

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

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

文件上传处理

结合FormData实现文件上传：

React实现浏览文件

const uploadFile = async () => {
  const formData = new FormData();
  formData.append('file', selectedFile);

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