カメラで撮ったイメージをファクトベースストレージに保存する。

Question

私がしたいのは、反応ネイティブカメラを使用して撮影した写真を反応ネイティブフェッチブロブでファイアベースストレージにアップロードすることです。起こらない。

私が見つけることができるすべての文書を辿り、何も動作していないようです。

これを達成するためのシステムがあれば誰でも回答として投稿してください。私は反応したネイティブカメラが返すjpgのURIを得ることができます（それはImageViewとすべてに表示されます）。しかし、アップロード機能は、ブロブを配置するときには動作を停止するようです。

私の現在の機能：

uploadImage = (uri, imageName, mime = 'image/jpg') => { 
    return new Promise((resolve, reject) => { 
     const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri 
     let uploadBlob = null 
     const imageRef = firebase.storage().ref('selfies').child(imageName) 
     console.log("uploadUri",uploadUri) 
     fs.readFile(uploadUri, 'base64').then((data) => { 
      console.log("MADE DATA") 
      var blobEvent = new Blob(data, 'image/jpg;base64') 
      var blob = null 
      blobEvent.onCreated(genBlob => { 
      console.log("CREATED BLOB EVENT") 
      blob = genBlob 
      firebase.storage().ref('selfies').child(imageName).put(blob).then(function(snapshot) { 
       console.log('Uploaded a blob or file!'); 
       firebase.database().ref("selfies/" + firebase.auth().currentUser.uid).set(0) 
       var updates = {}; 
       updates["https://stackoverflow.com/users/" + firebase.auth().currentUser.uid + "/signup/"] = 1; 
       firebase.database().ref().update(updates); 
      }); 
      }, (error) => { 
      console.log('Upload Error: ' + error) 
      alert(error) 
      },() => { 
      console.log('Completed upload: ' + uploadTask.snapshot.downloadURL) 
      }) 
     }) 
     }).catch((error) => { 
      alert(error) 
     }) 
    } 

私は可能な限り効率的にしたい、それが高速ですし、BASE64に変更しないように、より少ないメモリを取るならば、私はそれを好みます。今私はちょうどこの作品を作る方法の手がかりがありません。

これは私の人生におけるストレスの大きな原因であり、誰かがこれを理解してくれることを願っています。

Answer 1

最も速いアプローチは、ネイティブのandroid/ios sdkを使用してJSスレッドを塞がないようにすることです。そこには、これを行うためのネイティブモジュールを提供するライブラリがいくつかあります（それらはすべて小さなjs APIすべてのFirebaseロジックが実行されているネイティブサイドに反応ネイティブブリッジを介して通信します）

react-native-firebaseは、このようなライブラリの1つです。それはfirebase web sdkのapiに従っているので、web sdkの使い方を知っているなら、ネイティブSDKSでのみ利用できる追加のfirebase apiと同様に、このモジュールで全く同じロジックを使用できるはずです。

たとえば、ストレージ実装が含まれていて、便利なputFile関数があります。これは、デバイス上のファイルへのパスを提供することができ、ネイティブfirebase sdksを使用して、 JSスレッドで行われるため、非常に高速です。

例：

// other built in paths here: https://github.com/invertase/react-native-firebase/blob/master/lib/modules/storage/index.js#L146 
 
const imagePath = firebase.storage.Native.DOCUMENT_DIRECTORY_PATH + '/myface.png'; 
 
const ref = firebase.storage().ref('selfies').child('/myface.png'); 
 

 
const uploadTask = ref.putFile(imagePath); 
 

 
// .on observer is completely optional (can instead use .then/.catch), but allows you to 
 
// do things like a progress bar for example 
 
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, (snapshot) => { 
 
    // observe state change events such as progress 
 
    // get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded 
 
    const progress = (snapshot.bytesTransferred/snapshot.totalBytes) * 100; 
 
    console.log(`Upload is ${progress}% done`); 
 

 
    switch (snapshot.state) { 
 
    case firebase.storage.TaskState.SUCCESS: // or 'success' 
 
     console.log('Upload is complete'); 
 
     break; 
 
    case firebase.storage.TaskState.RUNNING: // or 'running' 
 
     console.log('Upload is running'); 
 
     break; 
 
    default: 
 
     console.log(snapshot.state); 
 
    } 
 
}, (error) => { 
 
    console.error(error); 
 
},() => { 
 
    const uploadTaskSnapshot = uploadTask.snapshot; 
 
    // task finished 
 
    // states: https://github.com/invertase/react-native-firebase/blob/master/lib/modules/storage/index.js#L139 
 
    console.log(uploadTaskSnapshot.state === firebase.storage.TaskState.SUCCESS); 
 
    console.log(uploadTaskSnapshot.bytesTransferred === uploadTaskSnapshot.totalBytes); 
 
    console.log(uploadTaskSnapshot.metadata); 
 
    console.log(uploadTaskSnapshot.downloadUrl) 
 
});

免責事項：私は反応し-ネイティブfirebaseの著者は思います。