使用Firebase存储上传base64图像

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位数字(所以:"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!');
         });

Answer 2

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

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

Answer 3

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

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