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

Question

我正在使用 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 - Returns 当前网络摄像头图像的 base64 编码字符串。 所以，我尝试使用 atob 命令，但是我收到错误消息：无法在 'Window' 上执行 'atob'：要解码的字符串未正确编码。

有谁知道如何将图像上传到 Firebase 存储？如有任何帮助，我们将不胜感激！

Answer 1

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

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

在你的例子中，由于 getScreenshot() returns 是一个 base64 编码的字符串，它会是这样的：

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

Answer 2

尝试使用 putString() 命令而不是 blob：

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

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

Is it possible to directly upload images captured by camera to Firebase Storage?

google-cloud-storage

firebase

reactjs

firebase-storage