Flutter에서 파일 저장 및 검색 구현 가이드

플러터 앱에서 파일 저장하기 소개 때때로 애플리케이션은 parseobject 내부에 저장하기에는 너무 큰 데이터를 저장해야 합니다 가장 일반적인 사용 사례는 이미지를 저장하는 것이지만, 문서, 비디오, 음악 및 기타 이진 데이터에도 사용할 수 있습니다 parse에 파일을 저장하려면 항상 파일을 다른 데이터 객체와 연결해야 합니다 그래야 객체를 쿼리할 때 이 파일 경로를 검색할 수 있습니다 연결하지 않으면 파일은 저장되지만 cloud에서 찾을 수 없습니다 또한 중요한 팁은 파일에 파일 확장자가 있는 이름을 부여하는 것입니다 이 확장자는 parse가 파일 유형을 파악하고 적절하게 처리할 수 있도록 합니다 또한 각 업로드는 고유 식별자를 받으므로 동일한 이름을 사용하여 여러 파일을 업로드하는 데 문제가 없습니다 flutter에서는 parsefile과 parsewebfile을 사용하여 애플리케이션 파일을 cloud에 저장하고 검색할 수 있습니다 이 가이드는 back4app 클라우드 저장소를 관리하기 위해 flutter 앱에서 파일을 저장하고 검색하는 방법을 설명합니다 파일을 데이터 객체에 연결하지 않으면 파일이 고아 파일이 되어 back4app cloud에서 찾을 수 없습니다 전제 조건 back4app에서 생성된 앱 참고 새 parse 앱 튜토리얼 을 따라 back4app에서 parse 앱을 만드는 방법을 배우세요 back4app에 연결된 flutter 앱 참고 flutter 프로젝트에 parse sdk 설치하기 를 따라 back4app에 연결된 flutter 프로젝트를 만드세요 android 또는 ios를 실행하는 장치(또는 가상 장치) 이 가이드 예제를 실행하려면 image picker 플러그인을 올바르게 설정해야 합니다 장치에 저장된 이미지에 접근하기 위해 ios에 대한 권한을 추가하는 것을 잊지 마세요 { btn target=” blank” rel=”nofollow”} android 및 ios 프로젝트 설정에 대한 지침을 주의 깊게 읽으세요 목표 back4app에서 이미지를 업로드하고 표시하는 flutter 갤러리 앱을 만듭니다 1 parsefile 및 parsewebfile 클래스 이해하기 이 parse sdk for flutter에는 세 가지 다른 파일 클래스가 있습니다 parsefilebase parsefilebase 는 이 sdk가 처리할 수 있는 모든 파일 클래스의 기초가 되는 추상 클래스입니다 parsefile parsefile 는 parsefilebase parsefilebase 를 확장하며, 기본적으로 모든 플랫폼에서 파일 클래스로 사용됩니다(웹에는 유효하지 않음) 이 클래스는 원시 파일을 저장하기 위해 file file 을 사용합니다 dart\ io dart\ io parsewebfile parsewebfile 는 flutter web에서 사용되는 parsefile parsefile 에 해당합니다 이 클래스는 원시 파일을 저장하기 위해 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 애플리케이션에 표시했습니다