react实现文件上传

2026-01-27 07:52:31React

文件上传的基本实现

在React中实现文件上传功能通常需要结合HTML的<input type="file">元素和React的状态管理。以下是一个基础实现示例：

import React, { useState } from 'react';

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

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

  const handleUpload = () => {
    if (!selectedFile) return;

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

    fetch('your-upload-endpoint', {
      method: 'POST',
      body: formData,
    })
    .then(response => response.json())
    .then(data => console.log('Upload success:', data))
    .catch(error => console.error('Upload error:', error));
  };

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

多文件上传支持

如果需要支持多文件上传，可以修改代码来接收多个文件：

react实现文件上传

const [selectedFiles, setSelectedFiles] = useState([]);

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

const handleUpload = () => {
  if (selectedFiles.length === 0) return;

  const formData = new FormData();
  selectedFiles.forEach(file => {
    formData.append('files', file);
  });

  // 其余上传逻辑相同
};

进度显示和验证

添加上传进度显示和文件验证可以提升用户体验：

const [uploadProgress, setUploadProgress] = useState(0);

const handleUpload = () => {
  const xhr = new XMLHttpRequest();
  xhr.upload.addEventListener('progress', (event) => {
    if (event.lengthComputable) {
      const progress = Math.round((event.loaded / event.total) * 100);
      setUploadProgress(progress);
    }
  });

  xhr.open('POST', 'your-upload-endpoint');
  xhr.send(formData);
};

// 文件类型验证
const handleFileChange = (event) => {
  const files = [...event.target.files];
  const validFiles = files.filter(file => 
    file.type === 'image/jpeg' || file.type === 'image/png'
  );
  setSelectedFiles(validFiles);
};

使用第三方库

对于更复杂的需求，可以考虑使用第三方库如react-dropzone：

react实现文件上传

import { useDropzone } from 'react-dropzone';

function DropzoneUpload() {
  const { getRootProps, getInputProps } = useDropzone({
    accept: 'image/*',
    onDrop: acceptedFiles => {
      // 处理上传文件
    }
  });

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

后端集成注意事项

前端实现文件上传功能时，后端API需要正确处理multipart/form-data请求。常见后端框架处理方式：

Node.js (Express):


const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => { // req.file包含上传的文件信息 });


- Python (Django):
```python
from django.core.files.storage import FileSystemStorage

def upload_file(request):
    if request.method == 'POST':
        uploaded_file = request.FILES['file']
        fs = FileSystemStorage()
        filename = fs.save(uploaded_file.name, uploaded_file)
        # 处理文件