是否可以将相机拍摄的图像直接上传到 Firebase 存储？答案

【问题标题】：Is it possible to directly upload images captured by camera to Firebase Storage?是否可以将相机拍摄的图像直接上传到 Firebase 存储？
【发布时间】：2021-11-06 20:06:02
【问题描述】：

我正在使用 React.js 创建一个可以拍摄照片并将其上传到 Firebase 存储的应用程序。我正在使用 react-webcam 库，它使用此命令拍照：

const ImageSrc = webcamRef.current.getScreenshot();

这就是我尝试将照片上传到存储的方式：

 storage.ref(`/images`).put(imageSrc)
 .on("state_changed" , alert("success") , alert)

但是，上传的文件是未定义的（没有照片）。

我尝试使用 blob 构造照片的 URL：

const imageUrl = window.URL.createObjectURL(new Blob(webcamRef.current.getScreenshot()))

但我收到此错误：>无法构造“Blob”：提供的值无法转换为序列。

在库中声明 getScreenshot - 返回当前网络摄像头图像的 base64 编码字符串。 所以，我尝试使用 atob 命令，但出现错误：无法执行' atob' on 'Window': 要解码的字符串编码不正确。

有人知道如何将图片上传到 Firebase 存储吗？任何帮助将不胜感激！

【问题讨论】：

标签： reactjs firebase google-cloud-storage firebase-storage

【解决方案1】：

如doc中所述，如果要从Base64url格式的字符串上传，则需要调用putString()方法如下（来自文档的示例）：

var message = '5b6p5Y-344GX44G-44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
ref.putString(message, 'base64url').then((snapshot) => {
  console.log('Uploaded a base64url string!');
});

在您的情况下，由于 getScreenshot() 返回一个 base64 编码的字符串，它会是这样的：

const imageSrc = webcamRef.current.getScreenshot();
storage.ref(`/images`).putString(imageSrc, 'imgBase64')   
 .on("state_changed" , alert("success") , alert)

【讨论】：

感谢您的回答。然后我还能使用 Cloud Vision API（如果照片是 base64 编码的）吗？
我尝试了代码，但它没有将任何内容上传到 Firebase 存储（我也没有收到警报）。我在控制台中收到此错误：未捕获的 FirebaseError：Firebase 存储：发生未知错误，请检查错误有效负载以获取服务器响应。（存储/未知）
尝试捕捉on()的文档中显示的错误。
我尝试实现这样的代码： const task = firebase.storage().ref(/images).putString(imageSrc, 'imgBase64') task.on(firebase.storage.TaskEvent. STATE_CHANGED, next, error, complete)，但是，我仍然有和以前一样的错误。
您是否设法找到解决方案，因为我遇到了与您相同的错误？

【解决方案2】：

尝试使用 putString() 命令而不是 blob，如下所示：

const task = firebase.storage().ref(`/images`).putString(imageSrc, 'data_url')

【讨论】：