React中上传Canvas至Firebase遇问题：imageRef.put不是函数

核心问题原因 #

你用的是Firebase Storage 模块化SDK（v9+），put()是旧版命名空间SDK的方法，新版里上传操作是通过独立的uploadString或uploadBytes函数实现的，不是存储引用的方法，所以会报imageRef.put is not a function。

不需要额外库，Canvas原生就能转格式 #

Canvas自带的toDataURL()或toBlob()足够完成转PNG的需求，不用额外引入第三方库。

两种可行的上传方案 #

方案1：直接上传Base64格式的DataURL

toDataURL()生成的是带前缀的Base64字符串，用uploadString并指定格式为data_url即可：

import { ref, uploadString } from "firebase/storage";

// 获取Canvas并生成DataURL
const canvas = document.getElementById('signature');
const dataURL = canvas.toDataURL('image/png', 0.5);

// 上传到Firebase Storage
const imageRef = ref(storage, "image.png");
uploadString(imageRef, dataURL, 'data_url')
  .then((snapshot) => {
    console.log('文件上传成功');
  })
  .catch((error) => {
    console.error('上传失败:', error);
  });

方案2：转成Blob后上传（更适合大文件）

把DataURL转成Blob，用uploadBytes上传，性能更优：

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

// DataURL转Blob的工具函数
function dataURLtoBlob(dataURL) {
  const arr = dataURL.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while(n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type: mime});
}

// 执行上传
const canvas = document.getElementById('signature');
const dataURL = canvas.toDataURL('image/png', 0.5);
const blob = dataURLtoBlob(dataURL);

const imageRef = ref(storage, "image.png");
uploadBytes(imageRef, blob)
  .then((snapshot) => {
    console.log('文件上传成功');
  })
  .catch((error) => {
    console.error('上传失败:', error);
  });

额外注意点 #

• React中推荐用useRef获取Canvas元素，避免直接用document.getElementById（比如const canvasRef = useRef(null);，然后<canvas ref={canvasRef} id="signature" />，使用时取canvasRef.current）。
• 之前上传出现9字节的undefined文件，大概率是Canvas元素没正确获取到，或者toDataURL()执行时Canvas还没有内容，要确保Canvas渲染完成后再执行上传逻辑。

内容的提问来源于stack exchange，提问作者Rich. T.