使用 Firebase 存储上传 base64 图像

Posted 2023-03-22

【中文标题】使用 Firebase 存储上传 base64 图像

【英文标题】：Upload a base64 image with Firebase Storage

【发布时间】：2017-01-11 14:49:18

【问题描述】：

我正在制作这个应用程序，用户可以在其中拥有个人资料图片（但每人只有一张图片）。我把所有东西都设置好了，但是当图片超过 2mb 时，加载需要一些时间，实际上我只需要 50kb 左右的图片（只有小图片显示，最大 40 像素）。我编写了一些代码将图像直接放入实时数据库（转换为画布并使它们成为 7kb base64 字符串）。但是，这并不是很干净，最好使用 Firebase 存储。

从新的更新 3.3.0 开始，您可以使用 putString() 方法将 Base64 格式的字符串上传到 Storage。但是，当我上传画布图像（以“data:image/jpeg;base64”开头）时，出现错误：

v code: "storage/invalid-format", message: "Firebase Storage: String does not match format 'base64': Invalid character found", serverResponse: null, name: "FirebaseError"强>。

这个错误是不是因为画布图像开头的字符串？我已经搜索了整个堆栈，但我似乎无法找到答案。

【参考方案1】：

哎呀，我已经忙了很长时间了，但是在我发布这个之后，我自己找到了答案。解决方案是获取 base64 变量并删除前 23 位数字（例如：“data:image/jpeg;base64”）并将其上传到 Firebase 存储。现在它被接受了，您可以通过以下方式将链接放入您的实时数据库：

var storageRef = firebase.storage().ref().child("Whatever your path is in Firebase Storage");
var imageRef = "Your path in the Realtime Database";

    storageRef.getDownloadURL().then(function(url) 
        imageRef.child("image").set(url);
    ); 

    var task = storageRef.putString("Your base64 string substring variable", 'base64').then(function(snapshot) 
         console.log('Uploaded a base64 string!');
         );

【讨论】：

您是否尝试过使用putString(myString, 'data_url')？这可能不需要你破解前 23 位数字。 firebase.google.com/docs/reference/js/firebase.storage

我可以确认@AnthonyChuinard 的解决方案有效。

@AnthonyChuinard funciona ！

谢谢！我一直在摸不着头脑

【参考方案2】：

看起来他们在 base64 图像的文档中有一个方法，不需要您手动替换 data:image... 部分：

ref.putString(message, 'data_url').then(function(snapshot) 
  console.log('Uploaded a data_url string!');
);

【参考方案3】：

我实际上遇到了同样的问题，并通过使用putString(message, 'base64') 并切断data:image/jpeg;base64, 来解决它。

上传 Base64url 格式字符串putString(message, 'base64url') 的方法对我不起作用。它返回了与您相同的错误。尝试使用putString(message, 'base64')。希望对您有所帮助！

【参考方案4】：

当使用putString 方法时，您只需要传入与前面（媒体类型）部分以逗号分隔的数据部分。您还需要自己指定 contentType，否则默认情况下 Firebase 存储会将其设置为 application/octet-stream，如果您将 URL 粘贴到浏览器中，您的文件将被下载而不是呈现。

如果未指定 contentType 元数据并且文件没有文件扩展名，则 Cloud Storage 默认为 application/octet-stream 类型

const base64str = "data:image/png;base64,....."
firebase
  .storage()
  .ref('path/to/image.png') // specify filename with extension 
  .putString(base64str.split(',')[1], "base64", contentType: 'image/png')
// specifying contentType                        ^^^

参考资料：

Base64 Wikipedia

Upload files with Cloud storage on web