如何存储、跨页面展示react-webcam拍摄的图片并支持删除？

核心思路 #

• 用Firebase Storage存储图片文件（Firestore不适合存储大体积的二进制/Base64数据）
• 用Firestore存储图片的下载URL和元数据（方便跨页查询、读取）
• 拍摄后将Base64截图转成Blob上传至Storage，再把生成的下载URL存入Firestore
• 相册页从Firestore拉取URL列表渲染图片，删除操作需同时清理Storage中的文件和Firestore中的对应记录

步骤1：修改拍摄页面的上传逻辑 #

假设你已完成Firebase的Storage和Firestore配置，以下是修改后的拍摄组件代码：

import { useState, useRef } from 'react';
import { Webcam } from 'react-webcam';
import { Link } from 'react-router-dom';
import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
import { addDoc, collection } from 'firebase/firestore';
import { storage, db } from './firebase/config'; // 你的Firebase配置文件

const SelfieCapture = () => {
  const webcamRef = useRef(null);
  const [img, setImg] = useState(null);
  const videoConstraints = {
    width: 400,
    height: 400,
    facingMode: 'user'
  };

  // 将Base64格式图片转换为Blob
  const base64ToBlob = async (base64) => {
    const response = await fetch(base64);
    return response.blob();
  };

  // 上传自拍至Firebase
  const uploadSelfie = async (base64Img) => {
    try {
      const blob = await base64ToBlob(base64Img);
      // 生成唯一文件名，避免重复覆盖
      const fileName = `selfies/${Date.now()}_${Math.random().toString(36).substring(2)}.png`;
      const storageRef = ref(storage, fileName);
      
      // 上传Blob至Storage
      await uploadBytes(storageRef, blob);
      // 获取可公开访问的下载URL
      const downloadURL = await getDownloadURL(storageRef);
      
      // 将URL和时间戳存入Firestore
      await addDoc(collection(db, 'selfies'), {
        url: downloadURL,
        createdAt: new Date()
      });
      
      console.log('自拍已保存');
    } catch (error) {
      console.error('上传失败:', error);
    }
  };

  const capture = () => {
    const imageSrc = webcamRef.current.getScreenshot();
    setImg(imageSrc);
    // 触发上传流程
    uploadSelfie(imageSrc);
  };

  return (
    <div className="Container">
      {img === null ? (
        <>
          <Webcam
            audio={false}
            mirrored={true}
            height={400}
            width={400}
            ref={webcamRef}
            screenshotFormat="image/png"
            videoConstraints={videoConstraints}
          />
          <button onClick={capture}>Capture photo</button>
        </>
      ) : (
        <>
          <img src={img} alt="screenshot" />
          <Link to="/gallery" style={{ textDecoration: 'none' }}>
            <p>查看相册</p>
          </Link>
          <button onClick={() => setImg(null)}>Retake</button>
        </>
      )}
    </div>
  );
};

export default SelfieCapture;

步骤2：实现相册页的展示与删除功能 #

创建Gallery.jsx组件，读取Firestore数据并提供删除功能：

import { useEffect, useState } from 'react';
import { collection, getDocs, deleteDoc, doc } from 'firebase/firestore';
import { ref, deleteObject } from 'firebase/storage';
import { db, storage } from './firebase/config';

const Gallery = () => {
  const [selfies, setSelfies] = useState([]);

  // 从Firestore拉取所有自拍记录
  useEffect(() => {
    const fetchSelfies = async () => {
      const querySnapshot = await getDocs(collection(db, 'selfies'));
      const selfieList = querySnapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      // 按拍摄时间倒序排列
      selfieList.sort((a, b) => b.createdAt - a.createdAt);
      setSelfies(selfieList);
    };
    fetchSelfies();
  }, []);

  // 删除自拍：同步删除Storage文件和Firestore记录
  const deleteSelfie = async (selfieId, selfieUrl) => {
    try {
      // 从下载URL中解析Storage文件路径
      const filePath = selfieUrl.split('?')[0].split('/o/')[1].replace('%2F', '/');
      const storageRef = ref(storage, decodeURIComponent(filePath));
      
      // 删除Storage中的图片文件
      await deleteObject(storageRef);
      // 删除Firestore中的对应记录
      await deleteDoc(doc(db, 'selfies', selfieId));
      
      // 更新本地列表
      setSelfies(selfies.filter(s => s.id !== selfieId));
      console.log('自拍已删除');
    } catch (error) {
      console.error('删除失败:', error);
    }
  };

  return (
    <div className="Gallery">
      <h2>我的自拍相册</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '1rem' }}>
        {selfies.map(selfie => (
          <div key={selfie.id} style={{ border: '1px solid #eee', padding: '0.5rem' }}>
            <img 
              src={selfie.url} 
              alt="自拍" 
              style={{ width: '100%', height: '180px', objectFit: 'cover' }} 
            />
            <button 
              onClick={() => deleteSelfie(selfie.id, selfie.url)}
              style={{ marginTop: '0.5rem', width: '100%' }}
            >
              删除
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Gallery;

关键注意事项 #

• Firebase权限配置：开发阶段可暂时放宽权限（生产环境需严格限制为授权用户访问）：

  // Storage规则示例
  rules_version = '2';
  service firebase.storage {
    match /b/{bucket}/o {
      match /{allPaths=**} {
        allow read, write: if true;
      }
    }
  }
  

• Base64转Blob原因：Firestore单文档最大限制为1MB，直接存Base64易触发限制，转Blob上传至Storage更高效。
• 跨页展示问题解决：之前传递本地状态URL导致页面跳转后数据丢失，现在从Firestore读取持久化数据，刷新或跳转后图片不会消失。

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