Question

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

自新更新3.3.0起，您可以使用putString（）方法将Base64格式的字符串上传到存储。但是，当我上传我的画布图像（以“data：image / jpeg; base64”开头）时，我收到错误：

v {code：“storage / invalid-format”，消息：“Firebase存储：字符串与格式'base64'不匹配：找到无效字符”，serverResponse：null，name：“FirebaseError”}

是否因为开头的画布图像的字符串而发生此错误？我搜遍了Stack，但我似乎无法找到答案。

Answer 1

Jeez，我现在已经很忙了很长时间，但就在我发布这篇文章之后，我自己也找到了答案。解决方案是获取base64变量并删除前23位数字（因此：＆＃34; data：image / jpeg; base64，＆＃34;）并将其上传到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!');
         });

Answer 2

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

上传Base64url格式化字符串putString(message, 'base64url')的方法对我没用。它给我带来了与你相同的错误。尝试使用putString(message, 'base64')。希望它有所帮助！

Answer 3

好像他们在docs中有一个用于base64图像的方法，不需要您手动替换data:image...部分：

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

使用Firebase存储上传base64图像

3 个答案: