Блог

Главная - Вопросы по программированию - Изображение не будет загружаться в хранилище firebase в react native

Изображение не будет загружаться в хранилище firebase в react native

# #javascript #reactjs #react-native #firebase-storage

Вопрос:

Я пытаюсь загрузить изображение в свое хранилище firebase firestore. Таким образом, приведенная ниже функция реализует, но загружает только нового ребенка в виде текста, а не изображения, которое он сам.

Как я могу загрузить изображение в формате .jpeg/.png или его нужно преобразовать в файл другого типа, чтобы это сработало?

Когда я использую этот метод:

const testImage = требуется(‘../активы/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!');
        });
        
      }

Ответ №1:

К какому типу это require('../assets/mom.png') приводит? Firebase может загружать данные только из строки в кодировке base64, a byte[] Blob или File ссылки a или.

См.Рабочий пример в документации RNFirebase по загрузке файлов.

Комментарии:

1. это путь к png в моем src-файле, но я не уверен, действительно ли он тянет png или просто отправляет путь. Есть ли способ создать ссылку на это изображение из каталога моего проекта?

2. То, что я пытался, не эквивалентно файлу пути const = ${utils.FilePath.PICTURES_DIRECTORY}/black-t-shirt-sm.png ;…?

3. в комментарии выше указан каталог PICTURES_DIRECTORY в виде строки? С помощью пути к файлу?

4. Это каталог на устройстве, в котором выполняется код, так что код заканчивается путем к локальному файлу, в который передается putFile .

5. Привет @Фрэнк ван Пуффелен на самом деле, я только что заработал! Я должен опубликовать ответ/ закрыть вопрос.

Ответ №2:

Я нашел это решение в Интернете и использовал ссылку на URL-адрес моего хранилища firebase, чтобы преобразовать файл изображения в большой двоичный объект и загрузить его.

Импортируйте хранилище firebase из конфигурации хранилища 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;

Ниже преобразует изображение в большой двоичный объект и загружает его в конфигурацию хранилища firebase, указанную выше. URI изображения необходимо передать в функцию после доступа к нему с вашего устройства. Ниже он передается как «изображение» в функцию sentToStorage().

ПРЕОБРАЗОВАНИЕ В БОЛЬШОЙ ДВОИЧНЫЙ ОБЪЕКТ

 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',
        };
Метки: