Работа с ParseFile в Flutter-приложениях на Back4App

сохранение файлов из приложения flutter введение иногда приложениям необходимо хранить данные, которые часто слишком велики, чтобы храниться внутри parseobject наиболее распространенный случай использования — это хранение изображений, но вы также можете использовать его для документов, видео, музыки и других бинарных данных чтобы сохранить файл в parse, вы всегда должны ассоциировать файл с другим объектом данных, чтобы вы могли получить этот путь к файлу при запросе объекта если вы не ассоциируете, файл будет сохранен, но вы не сможете его найти в облаке еще один важный совет — дать файлу имя с расширением это расширение позволяет parse определить тип файла и обработать его соответствующим образом также следует упомянуть, что каждое загрузка получает уникальный идентификатор, так что нет проблем с загрузкой нескольких файлов с одним и тем же именем в flutter, parsefile и parsewebfile позволяют вам хранить и извлекать файлы приложения в облаке этот гид объясняет, как хранить и извлекать файлы в вашем приложении flutter для управления облачным хранилищем back4app если вы не ассоциируете ваш файл с объектом данных, файл станет сиротским и вы не сможете его найти в облаке back4app предварительные требования приложение создано на back4app примечание следуйте за учебник по созданию нового parse app чтобы узнать, как создать parse app на back4app flutter приложение, подключенное к back4app примечание следуйте за установите parse sdk в проект flutter чтобы создать проект flutter, подключенный к back4app устройство (или виртуальное устройство), работающее на android или ios чтобы запустить этот пример руководства, вам нужно правильно настроить плагин 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() для сохранения файла в облаке 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