javascript - 将相机拍摄的图像上传到 React Native 上的 firebase 存储

Question

我想做的就是使用 react-native-fetch-blob 将使用 react-native-camera 拍摄的照片上传到 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 native 桥与运行所有 firebase 逻辑的 native 端进行通信)

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

例如，它包含一个存储实现和一个方便的 putFile 函数，您可以为它提供设备上文件的路径，它会使用 native 为您上传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)
});

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