Salva e visualizza file su Back4App con React Native SDK

13 min

salva file da un'app react native introduzione in questa guida, imparerai come memorizzare e recuperare file nella tua applicazione react native utilizzando il parse javascript sdk per gestire lo storage cloud di back4app nel mondo di parse, utilizziamo il tipo parse file parse file per gestire i file dopo aver creato il parse file parse file , lo memorizzerai nel cloud di back4app utilizzando il save() save() metodo dovresti sempre associare il file a un altro oggetto dati in modo da poter recuperare questo percorso del file quando interroghi l'oggetto se non associ, il file verrà memorizzato, ma non lo troverai nel cloud un altro consiglio importante è di dare un nome al file che abbia un'estensione questa estensione consente a parse di capire il tipo di file e gestirlo di conseguenza dobbiamo anche menzionare che ogni upload riceve un identificatore unico, quindi non ci sono problemi a caricare più file utilizzando lo stesso nome il caso d'uso più comune di un'app react native è memorizzare immagini in questa guida, costruirai un'app galleria demo per memorizzare e visualizzare immagini il codice sorgente completo per l'app creata in questo tutorial è https //github com/templates back4app/react native demo gallery app sentiti libero di seguire passo dopo passo o di saltare direttamente al codice riproduzione delle immagini se non associ il tuo file a un oggetto dati, il file diventerà un file orfano e non sarai in grado di trovarlo nel cloud di back4app obiettivo creare un'app galleria react native che carica e visualizza immagini utilizzando parse javascript e back4app prerequisiti per completare questo tutorial, avrai bisogno di completa il https //www back4app com/docs/parse sdk/react native sdk 1 installazione delle dipendenze lavorare con i file (cioè, caricare foto) nelle app react native è una delle funzionalità più comuni in questo tutorial, costruirai una semplice app galleria che carica e visualizza immagini una volta che hai un https //www back4app com/docs/parse sdk/react native sdk , vai nella sua directory principale e installa la seguente dipendenza cd startwithback4app \# per selezionare immagini sui dispositivi yarn add react native image picker per ios, installa i pod cd ios && npx pod install nota che l'auto collegamento è disponibile per react native v0 60+ v0 60+ , ma per informazioni sull'installazione di react native image picker react native image picker versioni precedenti, https //github com/react native image picker/react native image picker dopo aver installato, dovrai aggiungere la chiave nsphotolibraryusagedescription nsphotolibraryusagedescription al tuo info plist info plist per consentire all'utente di selezionare immagini/video dalla galleria su ios \<dict> //other keys \<key>nsphotolibraryusagedescription\</key> \<string>app name here vorrebbe accedere alla tua foto\</string> \</dict> su android non sono richieste autorizzazioni per selezionare foto per la galleria 2 selezionare un'immagine dalla galleria successivamente, costruirai un componente che avvolge l'interfaccia utente e la logica per selezionare un'immagine dalla galleria e caricarla nella tua directory principale, crea un uploadingimage js uploadingimage js file con il seguente contenuto 1 import react, {usestate} from 'react'; 2 import {view, button, image, stylesheet} from 'react native'; 3	 4 import {launchimagelibrary} from 'react native image picker'; 5 import parse from 'parse/react native js'; 6	 7 const uploadimage = () => { 8 const \[image, setimage] = usestate(null); 9	 10 async function upload() { 11 // todo implement this method 12 } 13 // this will open phone image library 14 function pickimage() { 15 launchimagelibrary( 16 { 17 mediatype 'photo', 18 includebase64 true, 19 maxheight 200, 20 maxwidth 200, 21 }, 22 (response) => { 23 // add selected image to the state 24 setimage(response); 25 }, 26 ); 27 } 28	 29 return ( 30 \<view> 31 \<button 32 onpress={pickimage} 33 title="pick an image from gallery" 34 color="#841584" /> 35 {image && \<image source={ {uri image uri} } style={styles currentimage}/>} 36	 37 {image && \<button title="upload" color="green" onpress={upload} />} 38 \</view> 39 ); 40	 41 }; 42	 43 const styles = stylesheet create({ 44 container { 45 height 400, 46 justifycontent 'center', 47 alignitems 'center', 48 }, 49 currentimage { 50 width 250, 51 height 250, 52 resizemode 'cover', 53 alignself 'center', 54 }, 55 }); 56	 57 export default uploadimage; il componente sopra rende un pulsante che apre la libreria di immagini quando un utente clicca l'immagine selezionata insieme a un pulsante di caricamento come puoi vedere, il caricamento caricamento non fa nulla successivamente, implementerai il suo comportamento e vedrai come caricare effettivamente le immagini nel cloud di back4app 3 caricamento di un'immagine lo storage di back4app è costruito su parse file parse file e ti consente di memorizzare qualsiasi file come documenti, immagini, video, musica e qualsiasi altro dato binario parse file parse file è una classe di utilità che il parse javascript sdk fornisce per astrarre il processo di memorizzazione dei file e renderlo facile per te pertanto, per caricare un'immagine, dovrai solo creare un parse file parse file e poi chiamare il metodo di salvataggio facendo ciò, parse farà automaticamente il resto per te puoi leggere la https //docs parseplatform org/js/guide/#files facciamo questo nella nostra funzione di caricamento funzione di caricamento 1 async function upload() { 2 // 1 create a file 3 const {base64, filename} = image; 4 const parsefile = new parse file(filename, {base64}); 5	 6 // 2 save the file 7 try { 8 const responsefile = await parsefile save(); 9 const gallery = parse object extend('gallery'); 10 const gallery = new gallery(); 11 gallery set('picture', responsefile); 12	 13 await gallery save(); 14 alert alert('the file has been saved to back4app '); 15 } catch (error) { 16 console log( 17 'the file either could not be read, or could not be saved to back4app ', 18 ); 19 } 20 } in breve, il frammento sopra crea e salva l'immagine selezionata, e dopo che il salvataggio è completato, la associamo a un parse object parse object chiamato gallery gallery ora devi importare e utilizzare il uploadimage uploadimage componente nel tuo app js app js 1 import react from 'react'; 2 import {safeareaview, stylesheet} from 'react native'; 3 // in a react native application 4 import parse from 'parse/react native js'; 5 import asyncstorage from '@react native community/async storage'; 6 import keys from ' /constants/keys'; 7 //before using the sdk 8 parse setasyncstorage(asyncstorage); 9 parse initialize(keys applicationid, keys javascriptkey); 10 parse serverurl = keys serverurl; 11	 12 import uploadimage from ' /uploadimage'; 13	 14 const app = () => { 15 return ( 16 \<safeareaview style={styles container}> 17 \<uploadimage/> 18 \</safeareaview> 19 ) 20 }; 21	 22 const styles = stylesheet create({ 23 container { 24 backgroundcolor '#f5f5f5', 25 flex 1, 26 }, 27 title { 28 fontsize 18, 29 textalign 'center', 30 fontweight 'bold', 31 }, 32 }); 33	 34 export default app; una volta fatto ciò, dovresti essere in grado di scegliere immagini dalla galleria e caricare con successo le immagini premendo il pulsante di caricamento 4 visualizzazione delle immagini dobbiamo ottenere l'url dell'immagine per recuperare i contenuti dell'immagine e mostrarli ai nostri utenti successivamente, costruirai un componente per interrogare le immagini dal nostro galleria galleria oggetto e visualizzarle su un flatlist nella tua directory principale, crea un gallery js gallery js file con il seguente contenuto 1 import react, {usestate, useeffect} from 'react'; 2 import {text, image, flatlist, stylesheet} from 'react native'; 3	 4 import parse from 'parse/react native js'; 5	 6 const gallery = () => { 7 const \[images, setimages] = usestate(\[]); 8	 9 useeffect(() => { 10 const fetchimages = async () => { 11 let query = new parse query('gallery'); 12 const results = await query find(); 13 setimages(results); 14 }; 15 16 fetchimages(); 17 }, \[]); 18	 19 return ( 20 \<flatlist 21 style={styles container} 22 contentcontainerstyle={styles listcontent} 23 data={images} 24 horizontal={false} 25 numcolumns={3} 26 listemptycomponent={() => \<text>no images uploaded \</text>} 27 renderitem={({item}) => 28 \<image source={ {uri item get('picture') url()} } style={styles imageitem}/> 29 )} 30 keyextractor={(item) => item id} 31 />); 32 }; 33	 34 const styles = stylesheet create({ 35 container { 36 flex 1, 37 backgroundcolor '#f5f5f5', 38 }, 39 listcontent { 40 justifycontent 'center', 41 alignitems 'center', 42 }, 43 imageitem { 44 width 100, 45 height 100, 46 resizemode 'cover', 47 marginhorizontal 5, 48 marginvertical 5, 49 }, 50 }); 51	 52 export default gallery; il componente sopra utilizza il useeffect useeffect hook per interrogare le immagini caricate nel gallery gallery object una volta che ha finito di renderizzare successivamente, dovrai aggiungere il componente al tuo app js app js 1 // other imports 2 import uploadimage from ' /uploadimage'; 3 import gallery from ' /gallery'; 4	 5 const app = () => { 6 return ( 7 \<safeareaview style={styles container}> 8 \<uploadimage/> 9 \<gallery/> 10 \</safeareaview> 11 ); 12 } quando esegui la tua app, dovresti essere in grado di vedere l'elenco delle immagini caricate in questo modo 5 è fatto! a questo punto, hai caricato la tua prima immagine su back4app e l'hai visualizzata in un'applicazione react native