Speichern von Flutter-Dateien mit Parse-SDK

dateien aus einer flutter app speichern einführung manchmal müssen anwendungen daten speichern, die oft zu groß sind, um sie in einem parseobject zu speichern der häufigste anwendungsfall ist das speichern von bildern, aber sie können es auch für dokumente, videos, musik und andere binäre daten verwenden um eine datei in parse zu speichern, sollten sie die datei immer mit einem anderen datenobjekt verknüpfen, damit sie diesen dateipfad beim abfragen des objekts abrufen können wenn sie keine verknüpfung herstellen, wird die datei gespeichert, aber sie werden sie in der cloud nicht finden ein weiterer wichtiger tipp ist, der datei einen namen mit einer dateierweiterung zu geben diese erweiterung ermöglicht es parse, den dateityp zu erkennen und entsprechend zu behandeln wir sollten auch erwähnen, dass jeder upload eine eindeutige kennung erhält, sodass es kein problem ist, mehrere dateien mit demselben namen hochzuladen in flutter ermöglichen parsefile und parsewebfile das speichern und abrufen von anwendungsdateien in der cloud dieser leitfaden erklärt, wie sie dateien in ihrer flutter app speichern und abrufen, um den cloud speicher von back4app zu verwalten wenn sie ihre datei nicht mit einem datenobjekt verknüpfen, wird die datei zu einer verwaisten datei und sie werden sie in der back4app cloud nicht finden können voraussetzungen eine app erstellt auf back4app hinweis folgen sie dem neuen parse app tutorial um zu lernen, wie man eine parse app auf back4app erstellt eine flutter app, die mit back4app verbunden ist hinweis folgen sie dem installieren sie das parse sdk im flutter projekt um ein flutter projekt zu erstellen, das mit back4app verbunden ist ein gerät (oder virtuelles gerät), das android oder ios ausführt um dieses beispiel auszuführen, sollten sie das plugin image picker ordnungsgemäß einrichten vergessen sie nicht, berechtigungen für ios hinzuzufügen, um auf bilder zuzugreifen, die auf dem gerät gespeichert sind { btn target=” blank” rel=”nofollow”} lesen sie sorgfältig die anweisungen zur einrichtung des android und ios projekts ziel erstellen sie eine flutter galerie app, die bilder von back4app hochlädt und anzeigt 1 verständnis der parsefile und parsewebfile klasse es gibt drei verschiedene dateiklassen in diesem parse sdk für flutter parsefilebase parsefilebase ist eine abstrakte klasse, die grundlage jeder dateiklasse, die dieses sdk verarbeiten kann parsefile parsefile erweitert parsefilebase parsefilebase und wird standardmäßig als die dateiklasse auf jeder plattform verwendet (nicht gültig für das web) diese klasse verwendet eine file file aus dart\ io dart\ io zum speichern der rohdatei parsewebfile parsewebfile ist das pendant zu parsefile parsefile für flutter web diese klasse verwendet ein uint8list uint8list zum speichern der rohdatei die methoden, die auf parsefilebase parsefilebase verfügbar sind, um dateien zu manipulieren save() save() oder upload() upload() zum speichern der datei in der cloud download() download() zum abrufen der datei und speichern im lokalen speicher es gibt eigenschaften, um informationen aus der gespeicherten datei zu erhalten url url erhält die datei url sie ist nur verfügbar, nachdem sie die datei gespeichert haben oder nachdem sie die datei von einem parse object erhalten haben name name erhält den dateinamen dies ist der dateiname, der vom benutzer vor dem aufruf der save() save() methode angegeben wurde nach dem aufruf der methode erhält die eigenschaft einen eindeutigen identifikator 2 hochladen eines bildes um ein bild hochzuladen, müssen sie nur eine parsefilebase parsefilebase instanz erstellen und dann die save save methode aufrufen lassen sie uns das in unserer upload upload funktion tun 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(); der obige codeausschnitt erstellt und speichert das bild, und nachdem das speichern abgeschlossen ist, verknüpfen wir es mit einem parseobject parseobject namens gallery gallery 1 final gallery = parseobject('gallery') 2 set('file', parsefile); 3 await gallery save(); 3 bilder anzeigen um bilder anzuzeigen, müssen sie die url des bildes abrufen um ein bild hochzuladen, müssen sie nur eine parsefilebase parsefilebase instanz erstellen und dann die save save methode aufrufen 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 hochladen und abrufen aus der flutter app lassen sie uns nun unser beispiel für das hochladen und anzeigen von bildern in der flutter app mit einer einfachen benutzeroberfläche verwenden öffnen sie ihr flutter projekt, gehen sie zur main dart main dart datei, bereinigen sie den gesamten code und ersetzen sie ihn durch 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 } finden sie ihre applicationid applicationid und client key client key anmeldeinformationen, indem sie zu ihrem app dashboard >einstellungen >sicherheit und schlüssel gehen unter back4app website https //www back4app com/ aktualisieren sie ihren code in main dart main dart mit beiden werten ihrer projekt applicationid applicationid und clientkey clientkey in back4app keyapplicationid = appid appid keyclientkey = client key client key führen sie das projekt aus, und die app wird wie im bild angezeigt fazit an diesem punkt haben sie ein bild auf back4app hochgeladen und in einer flutter anwendung angezeigt