将相机拍摄的图像上传到React Native上的Firebase存储

Question

我要做的就是将使用react-native-camera拍摄的照片上传到带有react-native-fetch-blob的Firebase存储中，但是无论如何都不会发生。

我浏览了所有可以找到的文档，但似乎没有任何效果。

如果有人拥有完成此任务的工作系统，请将其发布为答案。我可以获取react-native-camera返回的jpg的uri（它显示在ImageView和所有内容中），但是当需要放置Blob时，我的上传功能似乎停止工作。

我当前的功能：

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["/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线程，那里有一些库将提供一个react native模块来执行此操作（它们都有一个小型的js api，可以通过react进行通信本机桥接到所有Firebase逻辑运行的本机端）

react-native-firebase就是这样一个库。它遵循firebase web sdk的api，因此，如果您知道如何使用web sdk，则应该能够对此模块使用完全相同的逻辑，以及仅在本机SDKS上可用的其他firebase api。

例如，它包含一个存储实现和一个方便的putFile功能，您可以为它提供设备上文件的路径，并使用本机Firebase SDK将其上传给您，而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)
});

免责声明： 我是react-native-firebase的作者。