react实现附件功能

2026-01-26 18:26:34React

文件上传基础实现

使用HTML的<input type="file">元素配合React状态管理可以实现基本文件上传功能。创建一个受控组件来跟踪选中的文件：

import { 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);

    // 替换为实际API端点
    fetch('/api/upload', {
      method: 'POST',
      body: formData
    }).then(response => {
      // 处理响应
    });
  };

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

多文件上传支持

修改状态和事件处理器以支持多文件选择：

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

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

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

  // 上传逻辑...
};

文件预览与限制

添加文件类型和大小验证，实现图片预览功能：

react实现附件功能

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

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (!file) return;

  // 大小限制(2MB)
  if (file.size > 2 * 1024 * 1024) {
    alert('文件大小超过限制');
    return;
  }

  // 图片预览
  if (file.type.startsWith('image/')) {
    const reader = new FileReader();
    reader.onload = () => setPreview(reader.result);
    reader.readAsDataURL(file);
  }

  setSelectedFile(file);
};

进度显示与拖拽上传

使用XMLHttpRequest实现上传进度跟踪，添加拖拽区域：

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

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

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

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

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

return (
  <div 
    onDragOver={handleDragOver}
    onDrop={handleDrop}
    style={{ border: '2px dashed #ccc', padding: '20px' }}
  >
    {progress > 0 && <div>上传进度: {progress}%</div>}
    {/* 其他元素 */}
  </div>
);

文件列表管理

实现已上传文件的展示和管理功能：

react实现附件功能

const [fileList, setFileList] = useState([]);

const handleDelete = (fileName) => {
  setFileList(fileList.filter(file => file.name !== fileName));
};

return (
  <div>
    {fileList.map(file => (
      <div key={file.name}>
        <span>{file.name}</span>
        <button onClick={() => handleDelete(file.name)}>删除</button>
      </div>
    ))}
  </div>
);

与后端API集成

典型的上传API请求应包含认证头和错误处理：

const handleUpload = async () => {
  try {
    const response = await fetch('/api/upload', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${token}`
      },
      body: formData
    });

    if (!response.ok) throw new Error('上传失败');

    const data = await response.json();
    setFileList([...fileList, data.fileInfo]);
  } catch (error) {
    console.error('上传错误:', error);
  }
};

第三方库方案

使用react-dropzone库可以快速实现高级上传功能：

import { useDropzone } from 'react-dropzone';

function DropzoneUpload() {
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    accept: {
      'image/*': ['.jpeg', '.png'],
      'application/pdf': ['.pdf']
    },
    maxSize: 5 * 1024 * 1024,
    onDrop: acceptedFiles => {
      // 处理接收的文件
    }
  });

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