จัดการไฟล์ใน Flutter ด้วย Parse SDK บน Back4App

บันทึกไฟล์จากแอป flutter บทนำ บางครั้งแอปพลิเคชันจำเป็นต้องเก็บข้อมูลที่มักมีขนาดใหญ่เกินกว่าจะเก็บไว้ใน parseobject ข้อความที่ใช้บ่อยที่สุดคือการเก็บภาพ แต่คุณยังสามารถใช้มันสำหรับเอกสาร วิดีโอ เพลง และข้อมูลไบนารีอื่น ๆ ในการเก็บไฟล์ใน parse คุณควรเชื่อมโยงไฟล์กับวัตถุข้อมูลอื่นเสมอเพื่อให้คุณสามารถเรียกคืนเส้นทางไฟล์นี้เมื่อทำการค้นหาวัตถุ หากคุณไม่เชื่อมโยง ไฟล์จะถูกเก็บไว้ แต่คุณจะไม่พบมันใน cloud อีกเคล็ดลับที่สำคัญคือการตั้งชื่อไฟล์ที่มีนามสกุลไฟล์ นามสกุลนี้ช่วยให้ parse สามารถระบุประเภทไฟล์และจัดการได้อย่างเหมาะสม เราควรกล่าวถึงว่าการอัปโหลดแต่ละครั้งจะได้รับรหัสประจำตัวที่ไม่ซ้ำกัน ดังนั้นจึงไม่มีปัญหาในการอัปโหลดไฟล์หลายไฟล์โดยใช้ชื่อเดียวกัน ใน flutter, parsefile และ parsewebfile ช่วยให้คุณเก็บและเรียกคืนไฟล์แอปพลิเคชันใน cloud ได้ คู่มือนี้อธิบายวิธีการเก็บและเรียกคืนไฟล์ในแอป flutter ของคุณเพื่อจัดการการจัดเก็บข้อมูล back4app หากคุณไม่เชื่อมโยงไฟล์ของคุณกับวัตถุข้อมูล ไฟล์จะกลายเป็นไฟล์กำพร้าและคุณจะไม่สามารถค้นหามันใน back4app cloud ได้ ข้อกำหนดเบื้องต้น แอป ที่สร้างขึ้น บน back4app หมายเหตุ ติดตาม บทแนะนำการสร้าง parse app ใหม่ เพื่อเรียนรู้วิธีการสร้าง parse app บน back4app แอป flutter ที่เชื่อมต่อกับ back4app หมายเหตุ ติดตาม การติดตั้ง parse sdk บนโปรเจกต์ flutter เพื่อสร้างโปรเจกต์ flutter ที่เชื่อมต่อกับ back4app อุปกรณ์ (หรืออุปกรณ์เสมือน) ที่รัน android หรือ ios เพื่อที่จะรันตัวอย่างคู่มือนี้ คุณควรตั้งค่า plugin image picker อย่างถูกต้อง อย่าลืมเพิ่มสิทธิ์สำหรับ ios เพื่อเข้าถึงภาพที่เก็บไว้ในอุปกรณ์ { btn target=” blank” rel=”nofollow”} โปรดอ่านคำแนะนำในการตั้งค่าโปรเจกต์ android และ ios อย่างละเอียด เป้าหมาย สร้างแอป flutter gallery ที่อัปโหลดและแสดงภาพจาก back4app 1 การเข้าใจคลาส parsefile และ parsewebfile มีคลาสไฟล์สามประเภทใน parse sdk สำหรับ flutter parsefilebase parsefilebase เป็นคลาสนามธรรม ซึ่งเป็นพื้นฐานของทุกคลาสไฟล์ที่ sdk นี้สามารถจัดการได้ parsefile parsefile ขยาย parsefilebase parsefilebase และโดยค่าเริ่มต้นจะถูกใช้เป็นคลาสไฟล์ในทุกแพลตฟอร์ม (ไม่ถูกต้องสำหรับเว็บ) คลาสนี้ใช้ file file จาก dart\ io dart\ io สำหรับการเก็บไฟล์ดิบ parsewebfile parsewebfile เป็นเทียบเท่ากับ parsefile parsefile ที่ใช้ใน flutter web คลาสนี้ใช้ uint8list uint8list สำหรับการเก็บไฟล์ดิบ วิธีการที่มีอยู่ใน parsefilebase parsefilebase เพื่อจัดการไฟล์ save() save() หรือ upload() upload() เพื่อบันทึกไฟล์ใน cloud download() download() เพื่อดึงไฟล์และเก็บในที่เก็บข้อมูลท้องถิ่น มีคุณสมบัติในการดึงข้อมูลจากไฟล์ที่บันทึกไว้ url url ดึง url ของไฟล์ มันจะมีให้ใช้งานหลังจากที่คุณบันทึกไฟล์หรือหลังจากที่คุณดึงไฟล์จาก parse object name name ดึงชื่อไฟล์ นี่คือชื่อไฟล์ที่ผู้ใช้กำหนดก่อนที่จะเรียกใช้ save() save() เมธอด หลังจากเรียกใช้เมธอดนี้ คุณสมบัติจะได้รับตัวระบุที่ไม่ซ้ำกัน 2 อัปโหลดภาพ ในการอัปโหลดภาพ คุณจะต้องสร้าง parsefilebase parsefilebase อินสแตนซ์และจากนั้นเรียกใช้ save save เมธอด มาทำสิ่งนี้ในฟังก์ชัน upload upload ของเรากัน 1 parsefilebase? parsefile; 2 3 if (kisweb) { 4 //flutter web 5 parsefile = parsewebfile( 6 await pickedfile! readasbytes(), 7 name 'image jpg'); //name for file is required 8 } else { 9 //flutter mobile/desktop 10 parsefile = parsefile(file(pickedfile! path)); 11 } 12 await parsefile save(); โค้ดด้านบนสร้างและบันทึกภาพ และหลังจากการบันทึกเสร็จสิ้น เราจะเชื่อมโยงมันกับ parseobject parseobject ที่เรียกว่า gallery gallery 1 final gallery = parseobject('gallery') 2 set('file', parsefile); 3 await gallery save(); 3 การแสดงภาพ ในการแสดงภาพ คุณต้องได้รับ url ของภาพ ในการอัปโหลดภาพ คุณจะต้องสร้าง parsefilebase parsefilebase อินสแตนซ์และจากนั้นเรียกใช้ save save เมธอด 1 parsefilebase? varfile = parseobject get\<parsefilebase>('file'); 2 3 return image network( 4 varfile! url!, 5 width 200, 6 height 200, 7 fit boxfit fitheight, 8 ); 4 อัปโหลดและดึงข้อมูลจากแอป flutter ตอนนี้เรามาใช้ตัวอย่างของเราในการอัปโหลดและแสดงภาพในแอป flutter โดยมีอินเทอร์เฟซที่เรียบง่าย เปิดโปรเจกต์ flutter ของคุณ ไปที่ main dart main dart ไฟล์ ทำความสะอาดโค้ดทั้งหมด และแทนที่ด้วย 1 import 'dart\ io'; 2 3 import 'package\ flutter/cupertino dart'; 4 import 'package\ flutter/foundation dart'; 5 import 'package\ flutter/material dart'; 6 import 'package\ image picker/image picker dart'; 7 import 'package\ parse server sdk flutter/parse server sdk dart'; 8 9 void main() async { 10 widgetsflutterbinding ensureinitialized(); 11 12 final keyapplicationid = 'your app id here'; 13 final keyclientkey = 'your client key here'; 14 15 final keyparseserverurl = 'https //parseapi back4app com'; 16 17 await parse() initialize(keyapplicationid, keyparseserverurl, 18 clientkey keyclientkey, debug true); 19 20 runapp(materialapp( 21 title 'flutter storage file', 22 debugshowcheckedmodebanner false, 23 home homepage(), 24 )); 25 } 26 27 class homepage extends statefulwidget { 28 @override 29 homepagestate createstate() => homepagestate(); 30 } 31 32 class homepagestate extends state\<homepage> { 33 pickedfile? pickedfile; 34 35 list\<parseobject> results = \<parseobject>\[]; 36 double selecteddistance = 3000; 37 38 @override 39 widget build(buildcontext context) { 40 return scaffold( 41 body padding( 42 padding const edgeinsets all(16 0), 43 child column( 44 crossaxisalignment crossaxisalignment stretch, 45 children \[ 46 container( 47 height 200, 48 child image network( 49 'https //blog back4app com/wp content/uploads/2017/11/logo b4a 1 768x175 1 png'), 50 ), 51 sizedbox( 52 height 16, 53 ), 54 center( 55 child const text('flutter on back4app save file', 56 style textstyle(fontsize 18, fontweight fontweight bold)), 57 ), 58 sizedbox( 59 height 16, 60 ), 61 container( 62 height 50, 63 child elevatedbutton( 64 child text('upload file'), 65 style elevatedbutton stylefrom(primary colors blue), 66 onpressed () { 67 navigator push( 68 context, 69 materialpageroute(builder (context) => savepage()), 70 ); 71 }, 72 ), 73 ), 74 sizedbox( 75 height 8, 76 ), 77 container( 78 height 50, 79 child elevatedbutton( 80 child text('display file'), 81 style elevatedbutton stylefrom(primary colors blue), 82 onpressed () { 83 navigator push( 84 context, 85 materialpageroute(builder (context) => displaypage()), 86 ); 87 }, 88 )) 89 ], 90 ), 91 )); 92 } 93 } 94 95 class savepage extends statefulwidget { 96 @override 97 savepagestate createstate() => savepagestate(); 98 } 99 100 class savepagestate extends state\<savepage> { 101 pickedfile? pickedfile; 102 bool isloading = false; 103 104 @override 105 widget build(buildcontext context) { 106 return scaffold( 107 appbar appbar( 108 title text('upload fie'), 109 ), 110 body padding( 111 padding const edgeinsets all(12 0), 112 child column( 113 crossaxisalignment crossaxisalignment stretch, 114 children \[ 115 sizedbox(height 16), 116 gesturedetector( 117 child pickedfile != null 118 ? container( 119 width 250, 120 height 250, 121 decoration 122 boxdecoration(border border all(color colors blue)), 123 child kisweb 124 ? image network(pickedfile! path) 125 image file(file(pickedfile! path))) 126 container( 127 width 250, 128 height 250, 129 decoration 130 boxdecoration(border border all(color colors blue)), 131 child center( 132 child text('click here to pick image from gallery'), 133 ), 134 ), 135 ontap () async { 136 pickedfile? image = 137 await imagepicker() getimage(source imagesource gallery); 138 139 if (image != null) { 140 setstate(() { 141 pickedfile = image; 142 }); 143 } 144 }, 145 ), 146 sizedbox(height 16), 147 container( 148 height 50, 149 child elevatedbutton( 150 child text('upload file'), 151 style elevatedbutton stylefrom(primary colors blue), 152 onpressed isloading || pickedfile == null 153 ? null 154 () async { 155 setstate(() { 156 isloading = true; 157 }); 158 parsefilebase? parsefile; 159 160 if (kisweb) { 161 //flutter web 162 parsefile = parsewebfile( 163 await pickedfile! readasbytes(), 164 name 'image jpg'); //name for file is required 165 } else { 166 //flutter mobile/desktop 167 parsefile = parsefile(file(pickedfile! path)); 168 } 169 await parsefile save(); 170 171 final gallery = parseobject('gallery') 172 set('file', parsefile); 173 await gallery save(); 174 175 setstate(() { 176 isloading = false; 177 pickedfile = null; 178 }); 179 180 scaffoldmessenger of(context) 181 removecurrentsnackbar() 182 showsnackbar(snackbar( 183 content text( 184 'save file with success on back4app', 185 style textstyle( 186 color colors white, 187 ), 188 ), 189 duration duration(seconds 3), 190 backgroundcolor colors blue, 191 )); 192 }, 193 )) 194 ], 195 ), 196 ), 197 ); 198 } 199 } 200 201 class displaypage extends statefulwidget { 202 @override 203 displaypagestate createstate() => displaypagestate(); 204 } 205 206 class displaypagestate extends state\<displaypage> { 207 @override 208 widget build(buildcontext context) { 209 return scaffold( 210 appbar appbar( 211 title text("display gallery"), 212 ), 213 body futurebuilder\<list\<parseobject>>( 214 future getgallerylist(), 215 builder (context, snapshot) { 216 switch (snapshot connectionstate) { 217 case connectionstate none 218 case connectionstate waiting 219 return center( 220 child container( 221 width 100, 222 height 100, 223 child circularprogressindicator()), 224 ); 225 default 226 if (snapshot haserror) { 227 return center( 228 child text("error "), 229 ); 230 } else { 231 return listview\ builder( 232 padding const edgeinsets only(top 8), 233 itemcount snapshot data! length, 234 itembuilder (context, index) { 235 //web/mobile/desktop 236 parsefilebase? varfile = 237 snapshot data!\[index] get\<parsefilebase>('file'); 238 239 //only ios/android/desktop 240 / 241 parsefile? varfile = 242 snapshot data!\[index] get\<parsefile>('file'); 243 / 244 return image network( 245 varfile! url!, 246 width 200, 247 height 200, 248 fit boxfit fitheight, 249 ); 250 }); 251 } 252 } 253 }), 254 ); 255 } 256 257 future\<list\<parseobject>> getgallerylist() async { 258 querybuilder\<parseobject> querypublisher = 259 querybuilder\<parseobject>(parseobject('gallery')) 260 orderbyascending('createdat'); 261 final parseresponse apiresponse = await querypublisher query(); 262 263 if (apiresponse success && apiresponse results != null) { 264 return apiresponse results as list\<parseobject>; 265 } else { 266 return \[]; 267 } 268 } 269 } ค้นหา applicationid applicationid และ client key client key ข้อมูลประจำตัวโดยไปที่แดชบอร์ดแอปของคุณ >การตั้งค่า >ความปลอดภัยและคีย์ที่ เว็บไซต์ back4app https //www back4app com/ อัปเดตโค้ดของคุณใน main dart main dart โดยใช้ค่าทั้งสองของ applicationid applicationid และ clientkey clientkey ของโปรเจ็กต์ของคุณใน back4app keyapplicationid = appid appid keyclientkey = client key client key เรียกใช้โปรเจ็กต์ และแอปจะโหลดตามที่แสดงในภาพ บทสรุป ในจุดนี้ คุณได้อัปโหลดภาพไปยัง back4app และแสดงในแอป flutter แล้ว