react如何上传文件

2026-02-26 03:44:27React

上传文件的基本方法

在React中上传文件通常通过HTML的<input type="file">元素实现。创建一个受控组件来捕获用户选择的文件。

import { useState } from 'react';

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

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

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

文件上传到服务器

使用FormData对象和fetch API将文件发送到服务器端。确保后端接口支持文件接收（如Node.js的multer或Express的body-parser）。

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

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

显示上传进度

通过axios或fetch的进度事件实现进度条功能。axios提供了更简洁的进度跟踪方式。

import axios from 'axios';

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

  axios.post('/api/upload', formData, {
    onUploadProgress: (progressEvent) => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      console.log(`${percentCompleted}% uploaded`);
    },
  });
};

多文件上传支持

修改input元素的multiple属性允许选择多个文件，遍历event.target.files处理多个文件。

<input type="file" multiple onChange={handleMultipleFiles} />

const handleMultipleFiles = (event) => {
  const files = Array.from(event.target.files);
  files.forEach((file) => {
    console.log(file.name);
  });
};

文件验证

在上传前检查文件类型、大小等属性，提供即时反馈。

const isValidFile = (file) => {
  const validTypes = ['image/jpeg', 'image/png'];
  const maxSize = 5 * 1024 * 1024; // 5MB

  if (!validTypes.includes(file.type)) {
    alert('Invalid file type');
    return false;
  }

  if (file.size > maxSize) {
    alert('File too large');
    return false;
  }

  return true;
};

拖放上传实现

添加拖放区域和事件处理器提升用户体验。

<div 
  onDrop={handleDrop}
  onDragOver={handleDragOver}
>
  Drop files here
</div>

const handleDragOver = (e) => {
  e.preventDefault();
};

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

文件预览

对于图片文件，使用URL.createObjectURL()生成临时URL实现预览。

react如何上传文件

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

useEffect(() => {
  if (selectedFile) {
    const objectUrl = URL.createObjectURL(selectedFile);
    setPreview(objectUrl);
    return () => URL.revokeObjectURL(objectUrl);
  }
}, [selectedFile]);

return (
  {preview && <img src={preview} alt="Preview" />}
);