web-dev-qa-db-ja.com

FirebaseStorageを使用してbase64イメージをアップロードする

私は、ユーザーがプロフィール写真を持つことができるこのアプリを作成しています（ただし、それぞれ1枚の写真のみ）。すべての設定を行いましたが、画像が2mb以上の場合、読み込みに時間がかかり、実際には50kb程度の画像が必要です（画像の小さな表示のみ、最大40ピクセル）。画像をリアルタイムデータベースに直接配置するコードを作成しました（キャンバスに変換して7kbのbase64文字列にします）。ただし、これは実際にはクリーンではないため、FirebaseStorageを使用することをお勧めします。

新しいアップデート3.3.0以降、putString（）メソッドを使用して、Base64形式の文字列をストレージにアップロードできます。ただし、キャンバス画像（「data：image/jpeg; base64」で始まる）をアップロードすると、次のエラーが発生します。

v {コード： "storage/invalid-format"、メッセージ： "Firebaseストレージ：文字列がフォーマット 'base64'と一致しません：無効な文字が見つかりました"、serverResponse：null、名前： "FirebaseError"}。

このエラーは、最初のキャンバス画像の文字列が原因で発生しますか？ Stack全体を検索しましたが、答えが見つからないようです。

javascriptimagecanvasfirebasefirebase-storage
9
Zizazorro

うわあ、私はとても長い間忙しかったのですが、これを投稿した直後に、私は自分で答えを見つけました。解決策は、base64変数を取得し、最初の23桁（つまり、「data：image/jpeg; base64」）を削除して、FirebaseStorageにアップロードすることでした。これで承認され、次の方法でリアルタイムデータベースにリンクを配置できます。

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

私は実際に同じ問題を抱えていて、putString(message, 'base64')を使用し、_data:image/jpeg;base64,_を切り取って解決しました。

Base64url形式の文字列putString(message, 'base64url')をアップロードする方法が機能しませんでした。それはあなたが持っているのと同じエラーを私に返しました。 putString(message, 'base64')を使用してみてください。それが役に立てば幸い！

3
Khrystyna Skvarok