react中上传组件如何实现

2026-01-25 09:29:16React

文件上传基础实现

使用HTML原生<input type="file">元素实现最基础的文件上传功能。在React中通过useState管理选中的文件，通过onChange事件获取文件对象。

import { useState } from 'react';

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

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

  const handleUpload = () => {
    if (!file) return;
    const formData = new FormData();
    formData.append('file', file);
    // 这里添加实际的上传逻辑
  };

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

多文件上传支持

修改<input>元素的multiple属性允许选择多个文件，使用Array.from将FileList转换为数组方便处理。

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

const handleFileChange = (e) => {
  setFiles(Array.from(e.target.files));
};

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

文件预览功能

通过URL.createObjectURL生成临时URL实现图片预览，注意用URL.revokeObjectURL释放内存。

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

const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (file && file.type.match('image.*')) {
    setPreview(URL.createObjectURL(file));
  }
};

return (
  <div>
    {preview && <img src={preview} alt="预览" style={{maxHeight: 200}} />}
  </div>
);

拖拽上传实现

通过onDragOver、onDragLeave和onDrop事件实现拖拽区域，注意阻止默认事件行为。

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

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

const handleDrop = (e) => {
  e.preventDefault();
  setDragActive(false);
  setFiles(Array.from(e.dataTransfer.files));
};

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

上传进度显示

使用axios的onUploadProgress回调实现进度跟踪，需注意跨浏览器兼容性。

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

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

return (
  <div>
    <progress value={progress} max="100" />
  </div>
);

第三方库集成

使用react-dropzone等流行库快速实现复杂上传功能，示例展示基本集成方法。

import { useDropzone } from 'react-dropzone';

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

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

服务器端对接

展示与Node.js Express后端的对接示例，包含基本的文件接收和处理逻辑。

// 前端上传代码
const handleUpload = async () => {
  try {
    const res = await axios.post('/api/upload', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    });
    console.log(res.data);
  } catch (err) {
    console.error(err);
  }
};

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

app.post('/api/upload', upload.single('file'), (req, res) => {
  res.json({ filename: req.file.filename });
});

表单验证增强

实现文件类型、大小等验证，提供用户友好的错误提示。

react中上传组件如何实现

const [error, setError] = useState('');

const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (file.size > 5 * 1024 * 1024) {
    setError('文件大小不能超过5MB');
    return;
  }
  if (!file.type.match('image.*')) {
    setError('仅支持图片文件');
    return;
  }
  setError('');
  setFile(file);
};