React项目中无需用户选择上传本地图片及Canvas图像至Firebase Storage

一、上传Create React App Public目录中的本地图片 #

直接用图片路径字符串调用Firebase的put()是行不通的——因为put()（现在官方推荐用uploadBytes()）需要接收Blob或File对象，而不是URL地址。要实现自动上传本地仓库的图片，得先把图片转换成Blob再上传，具体代码如下：

import { getStorage, ref, uploadBytes } from "firebase/storage";

// 初始化Firebase Storage（确保你已经完成Firebase项目配置）
const storage = getStorage();

const uploadLocalImage = async () => {
  try {
    // 1. 从Public目录获取图片并转为Blob
    const imageUrl = `${process.env.PUBLIC_URL}/assets/myImage.png`;
    const response = await fetch(imageUrl);
    const imageBlob = await response.blob();

    // 2. 创建Storage存储路径（这里指定上传后的文件名）
    const storageRef = ref(storage, "images/myImage.png");

    // 3. 执行上传
    await uploadBytes(storageRef, imageBlob);
    console.log("本地图片上传成功");
  } catch (err) {
    console.error("上传出错:", err);
  }
};

// 调用时机示例：比如组件挂载时自动上传
// useEffect(() => {
//   uploadLocalImage();
// }, []);

二、上传HTML Canvas绘制的图片 #

Canvas内容可以直接转换成Blob格式，再上传到Firebase Storage，代码示例：

import { getStorage, ref, uploadBytes } from "firebase/storage";

const storage = getStorage();

const uploadCanvasImage = async (canvas) => {
  try {
    // 1. 将Canvas内容转为PNG格式的Blob
    const canvasBlob = await new Promise((resolve) => {
      canvas.toBlob(resolve, "image/png");
    });

    if (!canvasBlob) throw new Error("Canvas转Blob失败");

    // 2. 创建Storage存储路径
    const storageRef = ref(storage, "images/canvas-drawing.png");

    // 3. 上传Blob
    await uploadBytes(storageRef, canvasBlob);
    console.log("Canvas图片上传成功");
  } catch (err) {
    console.error("Canvas图片上传出错:", err);
  }
};

// 使用示例：假设你用ref获取了Canvas元素
// const canvasRef = useRef(null);
// 触发上传时调用：uploadCanvasImage(canvasRef.current);

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