使用 react-native-fetch-blob 将图像上传到 React Native 中的 Firebase 存储时出错答案

【问题标题】：getting error while uploading image to firebase storage in React Native using react-native-fetch-blob使用 react-native-fetch-blob 将图像上传到 React Native 中的 Firebase 存储时出错
【发布时间】：2018-12-25 02:28:42
【问题描述】：

使用 firebase 和 react-native-fetch-blob 库创建 React-Native 应用程序。由于此错误java.lang.String com.facebook.react.bridge.ReadableMap.string(java.lang.string) on a null object Reference，我无法将图像上传到 Firebase。

它还给了我possible unhandled promise Rejection (id=0) 的警告：未定义类型不是函数（评估'filepath.replace('file://,")'）尝试react-native-fetch-blob库的这段代码：

function uploadImage() {

        return new Promise((resolve, reject) => {
            let imgUri = 'content://com.google.android.apps.photos.contentprovider/-1/1/content%3A%2F%2Fmedia%2Fexternal%2Fimages%2Fmedia%2F80/ORIGINAL/NONE/1685675380'; let uploadBlob = null;
            const uploadUri = imgUri;

            const imageRef = firebase.storage().ref();
            const name = 'myimg';
            mime = 'image/jpeg';
            fs.readFile(uploadUri, 'base64')
                .then(data => {
                    return Blob.build(data, { type: `${mime};BASE64` });
                })
                .then(blob => {
                    uploadBlob = blob;
                    return imageRef.put(blob, { contentType: mime, name: name });
                })
                .then(() => {
                    uploadBlob.close()
                    return imageRef.getDownloadURL();
                })
                .then(url => {
                    resolve(url);
                })
                .catch(error => {
                    reject(error)
                })
        })
    }

dependencies": {
"fbjs": "^0.8.16",
"react": "^16.3.1",
"react-native": "^0.55.3",
"react-native-firebase": "^4.1.0",
"react-native-image-picker": "^0.26.10",
"react-navigation": "^2.6.0",
"rn-fetch-blob": "^0.10.11"

}

错误截图：

警告截图：

【问题讨论】：

标签： firebase react-native react-native-android firebase-storage react-native-fetch-blob

【解决方案1】：

如果您有 react-native-image-picker 库，则不需要库 rn-fetch-blob 将图像上传到 Firebase。

这个错误的根本原因来自：

type undefined is not a funtion (evaluating 'filepath.replace('file://,")')..

它是从 react-native-firebase 库的某处触发的，因为您将错误的参数数据传递给 imageRef.put(blob ...，该 blob 是从 rn-fetch-blob 库生成的。

而不是使用来自rn-fetch-blob 库的blob，你只需要传递一个uri 数据，它应该可以工作。让我告诉你怎么做。

//when user pick an image from local storage
ImagePicker.showImagePicker(options, (response) => {
  if (response.didCancel) {
    console.log('User cancelled photo picker');
  }
  else if (response.error) {
    console.log('ImagePicker Error: '+response.error);
  }
  else if (response.customButton) {
    console.log('User tapped custom button: '+response.customButton);
  }
  else {
    firebase.storage().ref().child('myimg.jpg')
    .put(response.uri, { contentType : 'image/jpeg' }) //--> here just pass a uri
    .then((snapshot) => {
      console.log(JSON.stringify(snapshot.metadata));
    })
  });
}

有关错误处理，您可以参考 Firebase 官方存储文档here

【讨论】：