javascript - 使用 Firebase 存储上传 base64 图像

Question

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

从新的更新 3.3.0 开始，您可以使用 putString() 方法将 Base64 格式的字符串上传到存储。但是，当我上传 Canvas 图像(以“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"}

强>.

这个错误是不是因为开头的canvas图片的字符串？我搜索了整个 Stack，但似乎找不到答案。

Answer 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!');
         });