如何在React项目中结合Firebase使用Ant Design Upload组件？

一、默认 action 参数含义 #

action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76' 是 Ant Design Upload 组件的默认上传地址，它是一个模拟接口，会返回固定的成功响应（包含status: 'success'的JSON结构），仅用于在无真实后端服务时测试组件的UI交互逻辑。实际开发中要上传到Firebase Storage，必须替换为自定义上传逻辑，不能依赖这个模拟接口。

二、上传至 Firebase Storage 的完整示例 #

1. 前置准备 #

确保已在React项目中完成Firebase初始化：

// firebaseConfig.js
import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

// 从Firebase控制台获取你的项目配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
export const storage = getStorage(app);

2. 自定义上传组件 #

使用Upload的customRequest属性接管上传逻辑，手动处理文件上传到Firebase Storage：

import { Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { storage } from './firebaseConfig';
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

const FirebaseUpload = () => {
  const handleUpload = ({ file, onSuccess, onError, onProgress }) => {
    // 创建Firebase存储引用，可自定义存储路径（例：uploads/文件名）
    const storageRef = ref(storage, `uploads/${file.name}`);
    const uploadTask = uploadBytesResumable(storageRef, file);

    // 监听上传进度
    uploadTask.on('state_changed',
      (snapshot) => {
        const percent = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
        onProgress({ percent });
      },
      (error) => {
        message.error(`文件上传失败: ${error.message}`);
        onError(error);
      },
      () => {
        // 上传成功后获取文件公开访问URL
        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
          message.success('文件上传成功');
          onSuccess({ url: downloadURL });
        });
      }
    );

    // 返回取消上传的方法
    return () => uploadTask.cancel();
  };

  return (
    <Upload
      customRequest={handleUpload}
      showUploadList={true}
      accept="image/*,application/pdf" // 可根据需求限制上传文件类型
    >
      <button type="button">
        <UploadOutlined /> 选择文件上传
      </button>
    </Upload>
  );
};

export default FirebaseUpload;

3. 关键说明 #

• customRequest：完全接管Upload组件的上传流程，替代默认的action请求
• uploadBytesResumable：Firebase提供的可恢复上传方法，支持实时监听上传进度
• getDownloadURL：上传完成后获取文件的公开访问链接，可用于页面展示或存储到数据库

内容的提问来源于stack exchange，提问作者Nazmul Hridoy