【问题标题】:React Native - upload image to Firebase storageReact Native - 将图像上传到 Firebase 存储
【发布时间】:2020-03-06 04:28:17
【问题描述】:

首先我创建一个 blob 文件

  RNFetchBlob.fs.readFile(localImgUrl2, 'base64')
    .then(base64ImageStr => Blob.build('image.png', base64ImageStr, { type: 'image/png;BASE64' }))

......然后我尝试上传到firebase

    .then((data) => {FBStorageRef.put(data, { contentType: mime })})

...但它给了我错误

Firebase Storage: Object 'profilePics/image.png' does not exist

我相信它是我的FBStorageRef,它有一个牛肉......我的云存储完全是空的,我想创建一个名为 profilePics 的文件夹......以及我想要的文件调用 image.png

const FBStorageRef = Firebase.storage().ref('/profilePics/image.png');

上面写着profilePics/image.png doe not exist,这很真实.....但这正是我想正确上传它的原因:)

【问题讨论】:

  • 嘿詹姆斯,我使用 Firebase 存储来保存图像,这样对吗?我只是从选择器中获取照片 URI 并将其作为图像“.jpg”保存到 firebase!
  • 是的@hongdevelop 我读过这篇文章 - 不幸的是没有帮助......如果你将我的代码与文章进行比较,你会发现它非常接近。但是我觉得这个问题只与将图像上传到 Firebase 相关.....不要认为使用 rn-fetch-blob 的代码有什么问题
  • 你好詹姆斯,你检查过“规则”部分吗?你有什么配置?也许是权限或无效配置:)
  • 我做到了,是的 - 为开发人员设置了规则,因此任何人都可以读/写

标签: firebase react-native firebase-storage


【解决方案1】:
  1. 如果文件路径看起来像file:///...。你可以简单地把它放到 Firebase 函数中,不需要 readFile 步骤。

到目前为止,我的代码可以正常工作:


  static uploadProfileAvatar(userID, fileURI) { // file URI is a path of a local image
    const updateTime = moment().unix();
    const storagePath = `${PROFILE_AVATAR_PATH}/${userID}_${updateTime}.jpg`;
    const fileMetaData = { contentType: 'image/jpeg' };
    return FirebaseStorage.uploadFile(fileURI, storagePath, fileMetaData);
  }

  static uploadFile(fileURI, storagePath, fileMetaData = null) {
    const uploadTask = firebase.storage().ref().child(storagePath).put(fileURI, fileMetaData);
    return uploadTask;
  }
  1. 如果您有类似rct-image-store://0 的路径。您必须编写它,然后获取本地路径图像。之后上传本地图片作为案例1
  ImageStore.getBase64ForTag(
    rctFileURI, // rct-image-store: path
    (base64Image) => {
      const imagePath = `${RNFS.DocumentDirectoryPath}/${new Date().getTime()}.jpg`;
      RNFS.writeFile(imagePath, `${base64Image}`, 'base64')
      .then((success) => {
        // now your file path is imagePath (which is a real path)
        if (success) {
          // upload with imagePath, same as the 1
        }
      })
      .catch(() => {});
    },
    () => {},
  );

【讨论】:

    【解决方案2】:

    使用 RNFirebase 处理 Firebase 存储上传和下载。检查以下链接以获取有关安装的更多详细信息。 https://github.com/invertase/react-native-firebase/tree/master/packages/storage

    然后使用以下代码上传文件

     import firebase from 'react-native-firebase';
    
      export const uploadMediaUri = (uri, path) => {
    
        return new Promise((resolve, reject) => {
            firebase.storage()
                .ref(path)
                .putFile(uri)
                .then(() => {
                    resolve()
                })
                .catch(e => {
                    reject(e)
                });
        })
    }
    

    这里uri是你要上传的文件的本地路径 而path是firebase存储的上传路径

    【讨论】:

    • 嗨 Vinayak - 这看起来很有希望,谢谢.....但是我按照 git 说明安装了包(npm install @react-native-firebase/storage --save)然后使用“import rnFb from '@react-native-firebase/storage'"; ......但它给了我错误“@react-native-firebase/app/lib.common 在 Haste 模块映射中不存在”......可以你帮忙?
    • 检查 node_module 文件夹中的@react-native-firebase/storage。如果它在那里然后重新启动你的 Metro Builder 并再次运行
    • 是的 - 存储文件在那里....重新启动很遗憾没有帮助。此外,虽然有一个“存储”文件夹,但没有“应用程序”文件夹(这是错误似乎在抱怨的)
    猜你喜欢
    • 2020-03-23
    • 1970-01-01
    • 2022-10-18
    • 2016-11-20
    • 1970-01-01
    • 2021-09-28
    • 2018-01-14
    • 2019-05-20
    相关资源
    最近更新 更多