前端antd，后端fastapi，解决文件上传

一、技术架构概述

1. 前端框架：React + Ant Design 5.x
   • 使用antd的Upload组件（支持拖拽/多文件/分片）
   • 后端框架：Python FastAPI
     • 利用UploadFile类处理文件流
     • 传输协议：HTTP + FormData（兼容性强）

二、前端实现（antd）

关键代码

import { Upload, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
const FileUpload = () => {
  const uploadProps = {
    name: 'file',
    action: 'http://localhost:8000/upload', // FastAPI上传接口
    headers: { Authorization: `Bearer ${token}` },
    beforeUpload(file) {
      // 限制文件类型与大小（2GB）
      const isValid = file.type.includes('image/') || file.type === 'application/pdf';
      if (!isValid) message.error('仅支持图片或PDF文件！');
      return isValid && file.size