Question

我想做的就是将使用react-native-camera拍摄的照片上传到带有react-native-fetch-blob的firebase存储，但无论我做什么都不会发生。

我已经查看了我能找到的所有文件，但似乎没有任何效果。

如果有人有完成此功能的工作系统，请将其作为答案发布。我可以得到反应原生相机返回的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线程，有一些库会提供一个反应原生模块来做这件事（他们都有一个小型js api通过响应本机桥接到所有firebase逻辑运行的本地端）

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

例如，它包含一个存储实现和一个方便的putFile函数，您可以为它提供设备上文件的路径，并使用本机firebase为您上传它sdks，JS线程上没有文件处理，因此非常快。

示例：

＆＃13;

// 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)
});

＆＃13;

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

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

1 个答案: