Mengunggah dan Menampilkan Gambar di React Native dengan Back4App

13 mnt

simpan berkas dari aplikasi react native pendahuluan dalam panduan ini, anda akan belajar bagaimana cara menyimpan dan mengambil berkas di aplikasi react native anda menggunakan parse javascript sdk untuk mengelola penyimpanan cloud back4app dalam dunia parse, kami menggunakan tipe parse file parse file untuk mengelola berkas setelah membuat parse file parse file , anda akan menyimpannya di cloud back4app menggunakan metode save() save() anda harus selalu mengaitkan berkas dengan objek data lain sehingga anda dapat mengambil jalur berkas ini saat melakukan kueri pada objek tersebut jika anda tidak mengaitkan, berkas akan disimpan, tetapi anda tidak akan menemukannya di cloud tip penting lainnya adalah memberikan nama pada berkas yang memiliki ekstensi berkas ekstensi ini memungkinkan parse untuk mengetahui tipe berkas dan menanganinya dengan tepat kami juga harus menyebutkan bahwa setiap unggahan mendapatkan pengidentifikasi unik, jadi tidak ada masalah dengan mengunggah beberapa berkas menggunakan nama yang sama kasus penggunaan paling umum dari aplikasi react native adalah menyimpan gambar dalam panduan ini, anda akan membangun aplikasi galeri demo untuk menyimpan dan menampilkan gambar kode contoh lengkap untuk aplikasi yang dibuat dalam tutorial ini adalah https //github com/templates back4app/react native demo gallery app silakan ikuti langkah demi langkah atau langsung ke kode menampilkan gambar jika anda tidak mengaitkan berkas anda dengan objek data, berkas tersebut akan menjadi berkas yatim dan anda tidak akan dapat menemukannya di cloud back4app tujuan untuk membuat aplikasi galeri react native yang mengunggah dan menampilkan gambar menggunakan parse javascript dan back4app prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan selesaikan tutorial https //www back4app com/docs/parse sdk/react native sdk 1 menginstal ketergantungan bekerja dengan file (misalnya, mengunggah foto) di aplikasi react native adalah salah satu fitur yang paling umum dalam tutorial ini, anda akan membangun aplikasi galeri sederhana yang mengunggah dan menampilkan gambar setelah anda memiliki https //www back4app com/docs/parse sdk/react native sdk , pergi ke direktori root nya dan instal dependensi berikut cd startwithback4app \# untuk memilih gambar di perangkat yarn add react native image picker untuk ios, instal pods cd ios && npx pod install perhatikan bahwa auto linking tersedia untuk react native v0 60+ v0 60+ , tetapi untuk informasi tentang menginstal react native image picker react native image picker versi yang lebih lama, https //github com/react native image picker/react native image picker setelah menginstal, anda perlu menambahkan nsphotolibraryusagedescription nsphotolibraryusagedescription kunci ke info plist info plist anda untuk memungkinkan pengguna memilih gambar/video dari foto di ios \<dict> //other keys \<key>nsphotolibraryusagedescription\</key> \<string>app name here ingin mengakses foto anda\</string> \</dict> di android tidak ada izin yang diperlukan untuk memilih foto untuk galeri 2 memilih gambar dari galeri selanjutnya, anda akan membangun komponen yang membungkus ui dan logika untuk memilih gambar dari galeri dan mengunggahnya di direktori root anda, buat sebuah uploadingimage js uploadingimage js file dengan konten berikut 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; komponen di atas menghasilkan sebuah tombol yang membuka perpustakaan gambar ketika pengguna mengklik gambar yang dipilih beserta tombol unggah seperti yang anda lihat, metode unggah unggah tidak melakukan apa apa selanjutnya, anda akan mengimplementasikan perilakunya dan melihat bagaimana cara sebenarnya mengunggah gambar ke cloud back4app 3 mengunggah gambar penyimpanan back4app dibangun di atas parse file parse file , dan memungkinkan anda menyimpan file apa pun seperti dokumen, gambar, video, musik, dan data biner lainnya parse file parse file adalah kelas utilitas yang disediakan oleh parse javascript sdk untuk mengabstraksi proses penyimpanan file dan memudahkan anda oleh karena itu, untuk mengunggah gambar, anda hanya perlu membuat sebuah parse file parse file instance dan kemudian memanggil metode simpan dengan melakukan ini, parse akan secara otomatis melakukan sisanya untuk anda anda dapat membaca https //docs parseplatform org/js/guide/#files mari kita lakukan itu dalam fungsi unggah unggah 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 } singkatnya, cuplikan di atas membuat dan menyimpan gambar yang dipilih, dan setelah penyimpanan selesai, kita mengaitkannya dengan sebuah parse object parse object yang disebut gallery gallery sekarang anda perlu mengimpor dan menggunakan uploadimage uploadimage komponen di 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; setelah anda melakukan itu, anda seharusnya dapat memilih gambar dari galeri dan berhasil mengunggah gambar dengan menekan tombol unggah 4 menampilkan gambar kita perlu mendapatkan url gambar untuk mengambil konten gambar dan menampilkannya kepada pengguna kita selanjutnya, anda akan membangun komponen untuk men query gambar dari galeri galeri objek dan menampilkannya di flatlist di direktori root anda, buat file gallery js gallery js dengan konten berikut 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; komponen di atas menggunakan hook useeffect useeffect untuk mengambil gambar yang diunggah ke gallery gallery object setelah selesai merender selanjutnya, anda perlu menambahkan komponen ini ke 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 } ketika anda menjalankan aplikasi anda, anda seharusnya dapat melihat daftar gambar yang diunggah seperti ini 5 selesai! pada titik ini, anda telah mengunggah gambar pertama anda di back4app dan menampilkannya di aplikasi react native