1

我想要做的就是使用 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，那么我更喜欢那样。现在我只是不知道如何使这项工作。

这一直是我生活中压力的巨大来源，我希望有人能解决这个问题。

4

1 回答 1

5

最快的方法是使用原生的 android / ios sdk 并避免阻塞 JS 线程，有一些库将提供一个 react 原生模块来做到这一点（它们都有一个小的 js api，可以通过 react 进行通信natives 桥接到所有 firebase 逻辑运行的本地端）

react-native-firebase就是这样一个库。它遵循 firebase web sdk 的 api，因此如果您知道如何使用 web sdk，那么您应该能够使用与此模块完全相同的逻辑以及仅在本机 SDK 上可用的其他 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)
});

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

于 2017-03-27T22:25:48.497 回答