Firebase 3でBase64イメージをアップロード

Question

Base64イメージをFirebaseにアップロードすることはできますか？

私はこのコードを試してみました：

    var storageRef = firebase.storage().ref(); 
       console.log(storageRef);           
       var file = "data:image/jpeg;base64,BASE64....."; 

       var uploadTask = storageRef.child('avatars/'+user.providerData[0].uid+'/photo-'+$scope.number+'.jpg').put(file); 
       uploadTask.on('state_changed', function(snapshot){ 
       }, function(error) { 
        console.log('error'); 
       }, function() { 
        console.log('success'); 
        var downloadURL = uploadTask.snapshot.downloadURL; 
       }); 

をしかし、私はエラーを持っている：

{code: "storage/invalid-argument", message: "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.", serverResponse: null, name: "FirebaseError"} 

Answer 1

、圧縮などの利点を得る：

base64toBlob(base64Data, contentType) { 
     contentType = contentType || ''; 
     var sliceSize = 1024; 
     var byteCharacters = atob(base64Data); 
     var bytesLength = byteCharacters.length; 
     var slicesCount = Math.ceil(bytesLength/sliceSize); 
     var byteArrays = new Array(slicesCount); 

     for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) { 
      var begin = sliceIndex * sliceSize; 
      var end = Math.min(begin + sliceSize, bytesLength); 

      var bytes = new Array(end - begin); 
      for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) { 
       bytes[i] = byteCharacters[offset].charCodeAt(0); 
      } 
      byteArrays[sliceIndex] = new Uint8Array(bytes); 
     } 
     return new Blob(byteArrays, { type: contentType }); 
    } 

Answer 2

Firebaseストレージは、文字列ではなく、JS FileまたはBlob種類を取ります。 Base64でエンコードされたデータをファイルに保存してからアップロードすることはできますが、実際のファイルに変換することをお勧めします（jpgまたはpngと判断して写真のように見える）ので、コンテンツタイプを持つことができます。など、あなたがこのようなブロブを返す関数へのbase64を渡すことができるなど

Answer 3

あなたが唯一の変換せずにputString機能を使用する必要がありますBASE64からBLOBへ。

firebase.storage().ref('/your/path/here').child('file_name') 
.putString(your_base64_image, ‘base64’, {contentType:’image/jpg’}); 

メタデータ{contentTypeの「画像/ JPG」}合格することを確認してくださいあなたはイメージでデータを取得するために機能putStringに三番目のパラメータとして（オプション）フォーマット。

または単に置く：

uploadTask = firebase.storage().ref('/your/path/here').child('file_name').putString(image, 'base64', {contentType:'image/jpg'}); 
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed' 
    function(snapshot) { 
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded 
    var progress = (snapshot.bytesTransferred/snapshot.totalBytes) * 100; 
    console.log('Upload is ' + progress + '% done'); 
    switch (snapshot.state) { 
     case firebase.storage.TaskState.PAUSED: // or 'paused' 
     console.log('Upload is paused'); 
     break; 
     case firebase.storage.TaskState.RUNNING: // or 'running' 
     console.log('Upload is running'); 
     break; 
    } 
    }, function(error) { 
    console.log(error); 
}, function() { 
    // Upload completed successfully, now we can get the download URL 
    var downloadURL = uploadTask.snapshot.downloadURL; 
}); 

それから（firebase.databaseし保存することdownloadURLを使用することができます）、および/または<img>タグのSRCとして配置します。