如何存在多个上传react

2026-01-24 15:53:27React

多文件上传的实现方法

在React中实现多文件上传可以通过HTML的<input type="file">元素结合multiple属性来完成。以下是一个基本的实现示例：

import { useState } from 'react';

function FileUpload() {
  const [files, setFiles] = useState([]);

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

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

    try {
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
      // 处理响应
    } catch (error) {
      console.error('上传失败:', error);
    }
  };

  return (
    <div>
      <input 
        type="file" 
        multiple 
        onChange={handleFileChange} 
      />
      <button onClick={handleUpload}>上传文件</button>
    </div>
  );
}

文件预览功能

在用户选择文件后，可以添加预览功能增强用户体验：

const FilePreview = ({ files }) => {
  return (
    <div>
      {files.map((file, index) => (
        <div key={index}>
          <p>{file.name}</p>
          {file.type.startsWith('image/') && (
            <img 
              src={URL.createObjectURL(file)} 
              alt={file.name} 
              style={{ maxWidth: '200px' }}
            />
          )}
        </div>
      ))}
    </div>
  );
};

进度跟踪实现

对于大文件或多个文件上传，实现进度跟踪很有必要：

如何存在多个上传react

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

  const xhr = new XMLHttpRequest();
  xhr.upload.addEventListener('progress', (e) => {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log(`上传进度: ${percent}%`);
  });

  xhr.open('POST', '/api/upload');
  xhr.send(formData);
};

文件大小和类型验证

添加验证确保上传文件符合要求：

const MAX_SIZE = 10 * 1024 * 1024; // 10MB
const ALLOWED_TYPES = ['image/jpeg', 'image/png'];

const validateFiles = (files) => {
  const validFiles = [];
  const invalidFiles = [];

  files.forEach(file => {
    if (file.size > MAX_SIZE) {
      invalidFiles.push(`${file.name} 超过大小限制`);
    } else if (!ALLOWED_TYPES.includes(file.type)) {
      invalidFiles.push(`${file.name} 类型不支持`);
    } else {
      validFiles.push(file);
    }
  });

  return { validFiles, invalidFiles };
};

使用第三方库

对于更复杂的需求，可以考虑使用专门的文件上传库：

如何存在多个上传react

npm install react-dropzone

使用示例：

import { useDropzone } from 'react-dropzone';

function DropzoneUpload() {
  const { getRootProps, getInputProps } = useDropzone({
    accept: 'image/*',
    multiple: true,
    onDrop: acceptedFiles => {
      console.log(acceptedFiles);
    }
  });

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

服务器端处理

Node.js服务器端处理多文件上传的示例：

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

app.post('/api/upload', upload.array('files'), (req, res) => {
  console.log(req.files); // 处理上传的文件
  res.json({ message: '文件上传成功' });
});