Загрузка изображения в Firebase в React Native

Question

У меня есть два пути изображения в моем компоненте состояния

Я пытаюсь загрузить одно из изображений внутри функции, но получаю сообщение об ошибке:

Firebase Storage: Invalid argument in 'put' at index 0: Expected Blob or file 

и моя функция

submitImages =() => { 

    // Upload images to Firebase storage 
    let user = firebaseAuth.currentUser; 
    let imagesRef = storageRef.child('productImages/' + user.uid); 
    imagesRef.put(this.state.imageFront).then(snapshot => { 
     console.log('Uploaded ' + this.state.imageFront); 
    }); 
} 

Что я должен делать вместо чтобы получить эти изображения до Firebase. Благодаря!

Answer 1

В чем ошибка говорит, что вам нужно использовать blob. Вы можете использовать среагировать-нативной выборки-блоб: https://github.com/wkh237/react-native-fetch-blob

Проверьте этот пример: https://github.com/dailydrip/react-native-firebase-storage/blob/master/src/App.js#L43-L69

Answer 2

Я отправляю мой код, так как это было немного неприятно для меня:

Чтобы загрузить изображения в firebase. вам необходимо загрузить изображения в виде Blobs. Если вы не знаете, что такое капли, не беспокойтесь.

Шаг 1.

npm install --save react-native-fetch-blob

Шаг 2.

// copy and paste this code where you will handle the file upload 

import RNFetchBlob from 'react-native-fetch-blob' 

const Blob = RNFetchBlob.polyfill.Blob; 
const fs = RNFetchBlob.fs; 
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest; 
window.Blob = Blob; 

Шаг 3.

// The uploadImage function that you are going to use: 

function uploadImage(uri, mime = 'image/jpeg', name) { 

    return new Promise((resolve, reject) => { 
    let imgUri = uri; let uploadBlob = null; 
    const uploadUri = Platform.OS === 'ios' ? imgUri.replace('file://', '') : imgUri; 
    const { currentUser } = firebase.auth(); 
    const imageRef = firebase.storage().ref(`/jobs/${currentUser.uid}`) 

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

Итак, как вы называете эту функцию? Передайте URI изображения в качестве первого аргумента, так как второй аргумент можно передать 'image/jpeg', а последним аргументом является имя изображения. Выберите имя, которое вам нравится.

Но Уолтер У меня есть несколько изображений и вы хотите их загрузить и хотите правильно загружать. Что делать, если одна загрузка удалась, а другая - нет?

ли это тогда:

let imgPromises = []; 
imgPromises.push(uploadImage(img1, 'image/jpeg', 'imageOne')); 
imgPromises.push(uploadImage(img2, 'image/jpeg', 'imageTwo')); 
imgPromises.push(uploadImage(img3, 'image/jpeg', 'imageOne')); 

Promise.all(imgPromises).then(urls => { 
    // ALL IMAGES SUCCEEDED and you will get an array of URIS that you can save to your database for later use! 
}).catch(error => { 
    // One OR many images failed the upload. Give feedback to someone. 
}) 

Answer 3

, если вы не возражаете против использования cloudinary, я покажу, как загрузить, а затем получить закачанный URL, чтобы сохранить в firebase https://medium.com/@ifeoluwaking24/how-to-upload-an-image-in-expo-react-native-to-firebase-using-cloudinary-24aac981c87

Также вы можете попробовать но обязательно добавьте свое имя_области и upload_preset https://snack.expo.io/@ifeking/upload-to-cloudinary