# Flutter | 顯示圖片且同步上傳
###### tags: `flutter`

今天小小遇到一個問題是關於上傳圖片且即時顯示出來，原本預計是發送成功後由伺服器讀取圖片網址再加載出來，但有些圖片會卡很久，所以改成本地端先顯示出來，然後背後再進行上傳的動作
為了達成這個目的，小小使用dart:convert的base64編碼，配合shared_preferences儲存
在使用file_picker選取我要的圖片後，先使用flutter_image_compress進行壓縮，然後將壓縮後的Uint8List格式進行base64，再儲存到S.prefs進行儲存
於上傳方面使用Dio，在上傳完成後將回傳的圖片網址中的圖片讀取下來並放入快取，再將其編碼成base64並儲存起來，並代替原本顯示的本地端圖片

範例程式碼:

//選取要的圖片
FilePickerResult image = await FilePicker.platform
.pickFiles(allowMultiple: false, type: FileType.image);
//進行壓縮
String path = image.files.single.path;
Uint8List compressFile = await FlutterImageCompress.compressWithFile(path,
minHeight: 800, minWidth: 600, quality: 30);

//編碼
String base64Image = base64Encode(compressFile);

//儲存圖片至本地端
saveImageToPrefs(base64Image);

//顯示暫存的圖片
setState((){
showImage(base64Image);
});

//上傳至伺服器
MultipartFile fromFile = await MultipartFile.fromBytes(compressFile,
contentType: MediaType('image', 'jpeg'));
FormData formData = FormData.fromMap({
"image": fromFile,
});
Dio dio = new Dio();
await dio.post(uri,data: formData,)
.then((value) async {
String imageUri = getImageUri(value);

//將圖片放入快取中
Uint8List image =
(await NetworkAssetBundle(Uri.parse(imageUri))
.load(imageUri))
.buffer
.asUint8List();

//編碼
String base64image = base64Encode(image);

//儲存
saveImageToPrefs(base64image);

//顯示圖片
setState((){
showImage(base64Image);
});
}

然後就可以了!!