如何使用React.js+react-webcam实现摄像头拍照直接上传至Firebase Storage

核心问题根源 #

react-webcam的getScreenshot()返回值是带MIME前缀的Base64 Data URI（格式为data:image/png;base64,xxxxxx），不符合Firebase Storage上传要求的Blob/File参数类型，也不能直接用来构造Blob或者解码，所以会触发你遇到的所有报错。

完整实现代码 #

1. 先写Base64转Blob的工具方法 #

const dataURItoBlob = (dataURI) => {
  // 拆分Base64前缀和编码内容
  const [prefix, content] = dataURI.split(',');
  // 解码Base64内容
  const byteString = atob(content);
  // 提取图片MIME类型
  const mimeType = prefix.split(':')[1].split(';')[0];
  // 转成ArrayBuffer
  const buffer = new ArrayBuffer(byteString.length);
  const uintArray = new Uint8Array(buffer);
  for (let i = 0; i < byteString.length; i++) {
    uintArray[i] = byteString.charCodeAt(i);
  }
  // 生成Blob对象
  return new Blob([uintArray], { type: mimeType });
}

2. 拍照后调用上传逻辑 #

// 拍照获取Base64内容
const imageSrc = webcamRef.current.getScreenshot();
// 空值判断，避免摄像头未就绪时报错
if (!imageSrc) {
  alert("摄像头未就绪，请重试");
  return;
}
// 转换为Blob
const imageBlob = dataURItoBlob(imageSrc);
// 自定义存储路径，用时间戳避免同名文件覆盖
const storagePath = `images/${Date.now()}.png`;
// 上传到Firebase Storage
storage.ref(storagePath).put(imageBlob)
.then(async (snapshot) => {
  alert("上传成功");
  // 可选：获取文件的公网访问链接
  const downloadUrl = await snapshot.ref.getDownloadURL();
  console.log("文件访问链接：", downloadUrl);
})
.catch((err) => {
  console.error("上传失败：", err);
  alert("上传失败，请检查网络和权限配置");
});

之前报错的具体原因 #

• 直接上传Base64失败：Firebase Storage的put()方法仅支持Blob、File、ArrayBuffer类型参数，传入字符串会被识别为无效内容，导致上传空文件。
• Blob构造报错：Blob构造函数第一个参数要求是数据序列组成的数组，直接传入Base64字符串不符合参数规范。
• atob解码报错：没有去掉Base64开头的data:image/png;base64,前缀，该前缀不属于Base64编码内容，直接解码会触发格式错误。

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