วิธีบันทึกและแสดงไฟล์ใน React Native ด้วย Parse SDK

11 นาที

บันทึกไฟล์จากแอป react native บทนำ ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการจัดเก็บและเรียกคืนไฟล์ในแอปพลิเคชัน react native ของคุณโดยใช้ parse javascript sdk เพื่อจัดการการจัดเก็บข้อมูลบน back4app ในโลกของ parse เราใช้ประเภท parse file parse file เพื่อจัดการไฟล์ หลังจากสร้าง parse file parse file , คุณจะจัดเก็บมันบน back4app cloud โดยใช้ save() save() วิธีการ คุณควรเชื่อมโยงไฟล์กับวัตถุข้อมูลอื่นเสมอเพื่อให้คุณสามารถเรียกคืนเส้นทางไฟล์นี้เมื่อทำการค้นหาวัตถุ หากคุณไม่เชื่อมโยง ไฟล์จะถูกจัดเก็บ แต่คุณจะไม่สามารถค้นหามันบน cloud เคล็ดลับที่สำคัญอีกอย่างคือการตั้งชื่อไฟล์ที่มีนามสกุลไฟล์ นามสกุลนี้ช่วยให้ parse สามารถระบุประเภทไฟล์และจัดการได้อย่างเหมาะสม เราควรกล่าวถึงว่า การอัปโหลดแต่ละครั้งจะได้รับรหัสประจำตัวที่ไม่ซ้ำกัน ดังนั้นจึงไม่มีปัญหาในการอัปโหลดไฟล์หลายไฟล์โดยใช้ชื่อเดียวกัน กรณีการใช้งานที่พบบ่อยที่สุดของแอป react native คือการจัดเก็บภาพ ในคู่มือนี้ คุณจะสร้างแอปแกลเลอรีตัวอย่างเพื่อจัดเก็บและแสดงภาพ โค้ดตัวอย่างทั้งหมดสำหรับแอปที่สร้างขึ้นในบทแนะนำนี้คือ https //github com/templates back4app/react native demo gallery app คุณสามารถติดตามไปทีละขั้นตอนหรือข้ามไปที่โค้ดได้โดยตรง เล่นภาพ หากคุณไม่เชื่อมโยงไฟล์ของคุณกับวัตถุข้อมูล ไฟล์จะกลายเป็นไฟล์กำพร้าและคุณจะไม่สามารถค้นหามันบน back4app cloud เป้าหมาย เพื่อสร้างแอปแกลเลอรี react native ที่อัปโหลดและแสดงภาพโดยใช้ parse javascript และ back4app ข้อกำหนดเบื้องต้น ในการทำตามบทแนะนำนี้ คุณจะต้อง ทำตามบทแนะนำ https //www back4app com/docs/parse sdk/react native sdk 1 การติดตั้ง dependencies การทำงานกับไฟล์ (เช่น การอัปโหลดภาพ) ในแอป react native เป็นหนึ่งในฟีเจอร์ที่พบบ่อยที่สุด ในบทเรียนนี้ คุณจะสร้างแอปแกลเลอรีง่ายๆ ที่อัปโหลดและแสดงภาพ เมื่อคุณมี https //www back4app com/docs/parse sdk/react native sdk , ไปที่ไดเรกทอรีรากของมันและติดตั้งการพึ่งพาต่อไปนี้ cd startwithback4app \# เพื่อเลือกภาพบนอุปกรณ์ yarn add react native image picker สำหรับ ios ให้ติดตั้ง pods cd ios && npx pod install โปรดทราบว่าการเชื่อมต่ออัตโนมัติสามารถใช้ได้กับ react native v0 60+ v0 60+ , แต่สำหรับข้อมูลเกี่ยวกับการติดตั้ง react native image picker react native image picker เวอร์ชันเก่า https //github com/react native image picker/react native image picker หลังจากติดตั้งแล้ว คุณจะต้องเพิ่ม nsphotolibraryusagedescription nsphotolibraryusagedescription คีย์ไปยัง info plist info plist ของคุณเพื่ออนุญาตให้ผู้ใช้เลือกภาพ/วิดีโอจากภาพใน ios \<dict> //other keys \<key>nsphotolibraryusagedescription\</key> \<string>app name here ต้องการเข้าถึงรูปภาพของคุณ\</string> \</dict> ใน android ไม่ต้องการสิทธิ์ในการเลือกภาพสำหรับแกลเลอรี 2 การเลือกภาพจากแกลเลอรี ถัดไป คุณจะสร้างคอมโพเนนต์ที่ห่อหุ้ม ui และตรรกะสำหรับการเลือกภาพจากแกลเลอรีและอัปโหลดมัน ในไดเรกทอรีหลักของคุณ ให้สร้างไฟล์ uploadingimage js uploadingimage js ด้วยเนื้อหาดังต่อไปนี้ 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; ส่วนประกอบข้างต้นแสดงผล ปุ่มที่เปิดห้องสมุดภาพเมื่อผู้ใช้คลิก ภาพที่เลือกพร้อมกับปุ่มอัปโหลด ตามที่คุณเห็น, อัปโหลด อัปโหลด วิธีการไม่ได้ทำอะไรเลย ต่อไปคุณจะดำเนินการพฤติกรรมของมันและดูวิธีการอัปโหลดภาพไปยัง back4app cloud จริงๆ 3 การอัปโหลดภาพ การจัดเก็บ back4app สร้างขึ้นจาก parse file parse file และช่วยให้คุณสามารถจัดเก็บไฟล์ใดๆ เช่น เอกสาร, รูปภาพ, วิดีโอ, เพลง, และข้อมูลไบนารีอื่นๆ parse file parse file เป็นคลาสยูทิลิตี้ที่ parse javascript sdk ให้มาเพื่อทำให้กระบวนการจัดเก็บไฟล์ง่ายขึ้นสำหรับคุณ ดังนั้น, เพื่ออัปโหลดภาพ, คุณจะต้องสร้าง parse file parse file อินสแตนซ์และจากนั้นเรียกใช้วิธีการบันทึก โดยการทำเช่นนี้, parse จะทำส่วนที่เหลือให้คุณโดยอัตโนมัติ คุณสามารถอ่าน https //docs parseplatform org/js/guide/#files มาทำสิ่งนั้นใน อัปโหลด อัปโหลด ฟังก์ชันของเรา 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 } โดยสรุปแล้ว โค้ดด้านบนสร้างและบันทึกภาพที่เลือก และหลังจากการบันทึกเสร็จสิ้น เราจะเชื่อมโยงมันกับ parse object parse object ที่เรียกว่า gallery gallery ตอนนี้คุณต้องนำเข้าและใช้ uploadimage uploadimage ใน 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; เมื่อคุณทำเช่นนั้น คุณควรจะสามารถเลือกภาพจากแกลเลอรีได้ และอัปโหลดภาพได้สำเร็จโดยการกดปุ่มอัปโหลด 4 การแสดงภาพ เราต้องได้รับ url ของภาพเพื่อดึงเนื้อหาของภาพและแสดงให้ผู้ใช้ของเราเห็น ต่อไปคุณจะสร้างคอมโพเนนต์สำหรับการค้นหาภาพจาก แกลเลอรี แกลเลอรี และแสดงบน flatlist ในไดเรกทอรีหลักของคุณ ให้สร้างไฟล์ gallery js gallery js ด้วยเนื้อหาดังต่อไปนี้ 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; ส่วนประกอบข้างต้นใช้ useeffect useeffect hook เพื่อดึงภาพที่อัปโหลดไปยัง gallery gallery object เมื่อมันเสร็จสิ้นการเรนเดอร์ ต่อไปคุณจะต้องเพิ่มส่วนประกอบนี้ไปยัง 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 } เมื่อคุณรันแอปของคุณ คุณควรจะสามารถเห็นรายการของภาพที่อัปโหลดได้แบบนี้ 5 เสร็จสิ้น! ในจุดนี้ คุณได้อัปโหลดภาพแรกของคุณบน back4app และแสดงมันในแอปพลิเคชัน react native แล้ว