使用Firebase存储上传Base64图片

Question

我正在制作一款应用程序，用户可以设置个人资料图片（但每个用户只能有一张图片）。我已经把所有的东西都设置好了，但是当图片大小超过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"}.

这个错误是否是由于画布图像开头的字符串引起的？我在Stack上搜索了所有内容，但似乎找不到答案。

- Zizazorro

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

- Zizazorro

---

你尝试使用putString(myString, 'data_url')了吗？这样做可能无需你修改前23位数字就能成功。https://firebase.google.com/docs/reference/js/firebase.storage - Anthony Chuinard

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

@AnthonyChuinard 已经生效了！ - JG_GJ

谢谢！我已经纠结了一段时间了。 - notnavindu

Answer 2

看起来文档中有一种针对base64图片的方法，不需要手动替换data:image...部分：

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

- mheavers

Answer 3

我曾遇到过同样的问题，通过使用 putString(message, 'base64') 并裁剪掉 data:image/jpeg;base64, 来解决它。

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

- Khrystyna Skvarok

Answer 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 维基百科

在网络上使用云存储上传文件

- Dharmaraj

Answer 5

如果您正在使用模块，则使用uploadString，否则根据文档使用putString

import { getStorage, ref, uploadString } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'some-child');

// Base64 formatted string
const message2 = '5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
uploadString(storageRef, message2, 'base64').then((snapshot) => {
  console.log('Uploaded a base64 string!');
});

// Base64url formatted string
const message3 = '5b6p5Y-344GX44G-44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
uploadString(storageRef, message3, 'base64url').then((snapshot) => {
  console.log('Uploaded a base64url string!');
});

// Data URL string
const message4 = 'data:text/plain;base64,5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
uploadString(storageRef, message4, 'data_url').then((snapshot) => {
  console.log('Uploaded a data_url string!');
});

- Big_Boulard