图像不会上传到本机反应中的 firebase 存储桶

Question

我正在尝试将图像上传到我的 firebase firestore 存储桶。因此，下面的功能实现了，但只上传了一个新的 child 作为文本，而不是它自己的图像。

我如何才能将图片上传为 .jpeg/.png 或是否必须将其转换为其他文件类型才能正常工作？

当我使用这个方法时：

const testImage = require('../assets/mom.png')

在我的控制台中返回值“13”。

const storage = firebase.storage();

const sendToStorage = () => {
        const testImage = require('../assets/mom.png')
        
       
        const ref = storage.ref()
        .child('another-child');

        ref.put(testImage).then((snapshot) => {
          console.log('Uploaded a blob or file!');
        });
        
      }

Answer 1

require('../assets/mom.png') 结果是什么类型？ Firebase 只能从 base64 编码的字符串、byte[]、Blob 或 File 引用上传数据。

有关工作示例，请参阅 uploading files 上的 RNFirebase 文档。

Answer 2

我在网上找到了这个解决方案，并使用 URL 对我的 firebase 存储桶的引用将我的图像文件转换为 blob 并上传。

从 FIREBASE STORAGE CONFIG 导入 Firebase 存储

import Firebase, {storage} from '../config/Firebase';

Firebase.js（FIREBASE 存储配置）

import firebase from 'firebase';
import "firebase/storage";

const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_AUTH_DOMAIN",
    databaseURL: "YOUR_DATABASE_URL",
    projectId: "YOUR_PROJECT_NAME",
    storageBucket: "YOUR_STORAGE_URL",
   
};

// Initialize Firebase
let Firebase = firebase.initializeApp(firebaseConfig)


// ... before export default statemen
export const db = firebase.firestore()
export const storage = firebase.storage();
export const storageRef = storage.ref();
export default Firebase;

下面将图像转换为 blob 并将其上传到上面设置的 firebase 存储配置。从您的设备访问图像 uri 后，需要将其传递到函数中。下面它作为 'image' 传递给函数 sentToStorage()。

转换为 BLOB

const sendToStorage = async (image) => {

      let uri = image;
      const filename = uri.substring(uri.lastIndexOf("/") + 1);
      const uploadUri = Platform.OS === "ios" ? uri.replace("file://", "") : uri;
      blob()
    

      const blob = await new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = function () {
          resolve(xhr.response);
        };
        xhr.onerror = function (e) {
          console.log(e);
          reject(new TypeError("Network request failed"));
        };
        xhr.responseType = "blob";
        xhr.open("GET", uri, true);
        xhr.send(null);
      });
      
      firebase
        .storage()
        .ref()
        .child("user/" + userid)
        .put(blob)
        .then((uri) => {
          console.log(uri);
        })
        .catch((error) => {
          console.log(error);
        });

        '') : image
         
        let formData = new FormData();
        formData.append("image", {
          name: filename,
          type: 'image/jpeg',
          uri: uploadUri
        })
        
        var metadata = {
          contentType: 'image/jpeg',
        };

图像不会上传到本机反应中的 firebase 存储桶

Image wont upload to firebase storage bucket in react native

javascript

reactjs

react-native

firebase-storage