react如何上传文件

2026-02-11 17:35:34React

使用HTML表单和FormData上传文件

在React中可以通过原生HTML的<input type="file">元素结合FormData对象实现文件上传。创建一个受控组件来获取用户选择的文件，然后通过fetch或axios发送到服务器。

function FileUpload() {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
      console.log('Upload success:', await response.json());
    } catch (error) {
      console.error('Upload error:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleFileChange} />
      <button type="submit">Upload</button>
    </form>
  );
}

使用第三方库实现高级功能

对于需要进度显示、批量上传等高级功能的场景，可以考虑使用react-dropzone或react-uploady等专门处理文件上传的库。这些库提供拖放上传、预览等开箱即用的功能。

import { useDropzone } from 'react-dropzone';

function DropzoneUpload() {
  const { getRootProps, getInputProps } = useDropzone({
    onDrop: acceptedFiles => {
      console.log(acceptedFiles);
      // 处理上传逻辑
    }
  });

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

处理文件上传的服务器端配置

确保服务器端正确处理multipart/form-data格式的请求。在Node.js中使用multer中间件，或在其他后端框架中配置相应的文件接收处理器。需要设置合适的存储路径和大小限制。

// Node.js Express示例
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.json({ message: 'File uploaded successfully' });
});

添加上传状态反馈

为用户提供上传进度和结果的视觉反馈。可以通过axios的onUploadProgress回调实现进度条，或使用状态管理显示成功/错误消息。

const [progress, setProgress] = useState(0);

const uploadFile = async () => {
  const config = {
    onUploadProgress: progressEvent => {
      const percent = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      setProgress(percent);
    }
  };
  await axios.post('/api/upload', formData, config);
};

文件验证和安全考虑

在上传前验证文件类型、大小等属性，防止服务器接收恶意文件。同时考虑在服务器端进行二次验证，并设置适当的CORS策略和安全头部。

const handleFileChange = (e) => {
  const selectedFile = e.target.files[0];
  if (selectedFile.size > 5 * 1024 * 1024) {
    alert('文件大小不能超过5MB');
    return;
  }
  if (!['image/jpeg', 'image/png'].includes(selectedFile.type)) {
    alert('仅支持JPEG和PNG格式');
    return;
  }
  setFile(selectedFile);
};

react如何上传文件