使用Firebase存储上传base64图像 [英] Upload a base64 image with Firebase Storage

问题描述

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

I'm making this app where users can have a profile picture (but only one picture each). I got everything set up, but when the pictures are 2mb+, it takes some time to load and actually I just need the pictures to be 50kb or so (only small display of pictures, max 40 pixels). I made some code to put the images directly into the realtime database (convert to canvas and make them a 7kb base64 string). However, this is not really clean and it's better to use Firebase Storage.

自新版本3.3.0起，您可以使用putString（）方法将Base64格式的字符串上载到Storage。但是，当我上传画布图像（以 data：image / jpeg; base64开头）时，出现错误：

Since the new update 3.3.0 you can upload Base64 formatted strings to Storage, using the putString() method. However, when I upload my canvas image (which starts with "data:image/jpeg;base64,"), I get the error:

v {code ：存储/无效格式，消息： Firebase存储：字符串与格式'base64'不匹配：发现无效字符，serverResponse：空，名称： FirebaseError} 。

是否由于开头的画布图像字符串而发生此错误？我已经搜索了整个Stack，但似乎找不到答案。

Does this error occur because of string of the canvas image in the beginning? I've searched all over Stack, but I can't seem to find the answer.

推荐答案

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

Jeez, I've been busy for a very long time now, but just after I posted this, I've found the answer myself. The solution was to get the base64 variable and remove the first 23 digits (so: "data:image/jpeg;base64,") and upload it to the Firebase Storage. Now it gets accepted and you can put the link in your Realtime Database via:

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

这篇关于使用Firebase存储上传base64图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！