Hochladen Bild Feuerbasis in Reaktion india

Question

Ich habe zwei Bildpfade in meiner Komponente Zustand

Ich versuche, innerhalb einer Funktion eines der Bilder zu laden, aber einen Fehler:

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

und meine Funktion

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

Was soll ich stattdessen tun um diese Bilder zu Firebase zu bekommen. Vielen Dank!

Answer 1

Was der Fehler sagt, ist, dass Sie einen Blob verwenden müssen. Sie können reagieren-native-Fetch-Blob verwenden: https://github.com/wkh237/react-native-fetch-blob

Schauen Sie sich dieses Beispiel: https://github.com/dailydrip/react-native-firebase-storage/blob/master/src/App.js#L43-L69

Answer 2

ich meinen Code bin Entsendung da dies ein wenig frustrierend für mich war:

Um Bilder hochladen zu Firebase. Speicher müssen Sie die Bilder als Blobs hochladen. Wenn du nicht weißt, was Blobs sind, mach dir keine Sorgen.

Schritt 1.

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

Schritt 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; 

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

So, wie Sie diese Funktion nennen? Übergeben Sie den URI des Bildes als erstes Argument, als zweites Argument können Sie 'image/jpeg' übergeben und das letzte Argument ist der Name des Bildes. Wähle den Namen, den du magst.

Aber Walter ich habe mehrere Bilder und möchte diese hochladen und möchte den Upload korrekt abwickeln. Was ist, wenn ein Upload erfolgreich ist und der andere nicht?

Tun Sie dies dann:

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

wenn Sie nicht cloudinary mit nichts dagegen, ich zeigen, wie man laden und dann die hochgeladene url bekommen https://medium.com/@ifeoluwaking24/how-to-upload-an-image-in-expo-react-native-to-firebase-using-cloudinary-24aac981c87

auch zu Feuerbasis speichern Sie können es versuchen Snack, aber stellen Sie sicher, dass Sie Ihre cloud_name und upload_preset https://snack.expo.io/@ifeking/upload-to-cloudinary