Panduan Teknis: Simpan dan Ambil Berkas di Flutter

simpan berkas dari aplikasi flutter pendahuluan terkadang aplikasi perlu menyimpan data yang seringkali terlalu besar untuk disimpan di dalam parseobject kasus penggunaan yang paling umum adalah menyimpan gambar, tetapi anda juga dapat menggunakannya untuk dokumen, video, musik, dan data biner lainnya untuk menyimpan berkas di parse, 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 mengetahui jenis berkas dan menanganinya dengan tepat kami juga harus menyebutkan bahwa setiap unggahan mendapatkan pengidentifikasi unik, jadi tidak ada masalah mengunggah beberapa berkas dengan nama yang sama di flutter, parsefile dan parsewebfile memungkinkan anda menyimpan dan mengambil berkas aplikasi di cloud panduan ini menjelaskan cara menyimpan dan mengambil berkas di aplikasi flutter anda untuk mengelola penyimpanan cloud back4app jika anda tidak mengaitkan berkas anda dengan objek data, berkas tersebut akan menjadi berkas yatim dan anda tidak akan dapat menemukannya di cloud back4app prasyarat sebuah aplikasi dibuat di back4app catatan ikuti tutorial aplikasi parse baru untuk belajar cara membuat aplikasi parse di back4app sebuah aplikasi flutter yang terhubung ke back4app catatan ikuti instal sdk parse di proyek flutter untuk membuat proyek flutter yang terhubung ke back4app sebuah perangkat (atau perangkat virtual) yang menjalankan android atau ios untuk menjalankan contoh panduan ini, anda harus mengatur plugin image picker dengan benar jangan lupa untuk menambahkan izin untuk ios agar dapat mengakses gambar yang disimpan di perangkat { btn target=” blank” rel=”nofollow”} bacalah dengan seksama instruksi untuk mengatur proyek android dan ios tujuan buat aplikasi galeri flutter yang mengunggah dan menampilkan gambar dari back4app 1 memahami kelas parsefile dan parsewebfile ada tiga kelas file yang berbeda dalam sdk parse ini untuk flutter parsefilebase parsefilebase adalah kelas abstrak, dasar dari setiap kelas file yang dapat ditangani oleh sdk ini parsefile parsefile memperluas parsefilebase parsefilebase dan secara default digunakan sebagai kelas file di setiap platform (tidak berlaku untuk web) kelas ini menggunakan file file dari dart\ io dart\ io untuk menyimpan file mentah parsewebfile parsewebfile adalah setara dengan parsefile parsefile yang digunakan di flutter web kelas ini menggunakan uint8list uint8list untuk menyimpan file mentah metode yang tersedia di parsefilebase parsefilebase untuk memanipulasi file save() save() atau upload() upload() untuk menyimpan file di cloud download() download() untuk mengambil file dan menyimpannya di penyimpanan lokal ada properti untuk mendapatkan informasi dari file yang disimpan url url mendapatkan url file ini hanya tersedia setelah anda menyimpan file atau setelah anda mendapatkan file dari parse object name name mendapatkan nama file ini adalah nama file yang diberikan oleh pengguna sebelum memanggil save() save() metode setelah memanggil metode tersebut, properti menerima pengidentifikasi unik 2 mengunggah gambar untuk mengunggah gambar, anda hanya perlu membuat sebuah parsefilebase parsefilebase instance dan kemudian memanggil save save metode mari kita lakukan itu dalam fungsi 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(); potongan di atas membuat dan menyimpan gambar, dan setelah penyimpanan selesai, kita mengaitkannya dengan sebuah parseobject parseobject yang disebut gallery gallery 1 final gallery = parseobject('gallery') 2 set('file', parsefile); 3 await gallery save(); 3 menampilkan gambar untuk menampilkan gambar, anda perlu mendapatkan url gambar tersebut untuk mengunggah gambar, anda hanya perlu membuat sebuah parsefilebase parsefilebase instance dan kemudian memanggil metode 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 unggah dan ambil dari aplikasi flutter mari kita gunakan contoh kita untuk mengunggah dan menampilkan gambar di aplikasi flutter, dengan antarmuka yang sederhana buka proyek flutter anda, pergi ke main dart main dart file, bersihkan semua kode, dan ganti dengan 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 } temukan applicationid applicationid dan client key client key kredensial anda dengan menavigasi ke dashboard aplikasi anda >pengaturan >keamanan dan kunci di situs web back4app https //www back4app com/ perbarui kode anda di main dart main dart dengan kedua nilai dari applicationid applicationid proyek anda dan clientkey clientkey di back4app keyapplicationid = appid appid keyclientkey = client key client key jalankan proyek, dan aplikasi akan dimuat seperti yang ditunjukkan dalam gambar kesimpulan pada titik ini, anda telah mengunggah gambar di back4app dan menampilkannya di aplikasi flutter