#取得した画像をパスで保存したい(FireStorageを使いたくない)
multi_image_pickerを使って端末から画像を取得するとパッケージ固有のAssetで取得できる。
そのAssetのパスを見つけて保存する方法。
iOSだとアップデートしたときにファイルが消えて無くなる(パスが変わる)ので、アプリ専用ディレクトリ相対パスを保存する必要がある。
##パッケージ
使ったパッケージはこれです。
設定は省いてます。
1.画像データの取得(Asset)
ドキュメントの通りにAssetを取得する
getimage.dart
try {
resultList = await MultiImagePicker.pickImages(
maxImages: 300,
enableCamera: true,
selectedAssets: images,
cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
materialOptions: MaterialOptions(
actionBarColor: "#abcdef",
actionBarTitle: "Example App",
allViewTitle: "All Photos",
useDetailsView: false,
selectCircleStrokeColor: "#000000",
),
);
} on Exception catch (e) {
error = e.toString();
}
###2.Assetを処理してパスを取得する
getimage.dart
for (var image in resultList) {
//Assetの元画像のByteDataを取得する
final byteData = await image.getByteData();
//multi_image_pickerが取得した画像の一時ディレクトリのパスを取得(path_providerを使用)
final tempFile =
File('${(await getTemporaryDirectory()).path}/${image.name}');
//ByteDataを使って一時パスのデータをファイルに変換
final file = await tempFile.writeAsBytes(
byteData.buffer.asUint8List(
byteData.offsetInBytes,
byteData.lengthInBytes,
),
);
/*
一時ディレクトリのパスだとデータがアプリをアップデートしたときに消えて無くなるのでiOSでアプリ専用ディレクトリにコピー
そのときにディレクトリの絶対パスを保存するとこれまた消えて無くなるので相対パスを保存する必要がある
*/
//任意のパス設定(最終的に保存するパス)
String relativePath = '/' +
DateTime.now().millisecondsSinceEpoch.toString() +
Path.extension(file.path);
//アプリ専用ディレクトリのパス
final String appdirpath = (await getApplicationDocumentsDirectory()).path;
//アプリ専用ディレクトリに保存する時のパス
String newPath = '$appdirpath' + relativePath;
//一時ディレクトリからアプリ専用ディレクトリにfileをコピー
File res = await file.copy(newPath);
//
pictureURL.add(relativePath);
picturewiget.add(Image.file(res));
}
//firestoreに保存する処理
uploadfirestore(relativePath);
3.保存したパスで画像の絶対パスを取得する
getimage.dart
//この関数に保存したパスを渡せば画像の保存先絶対パスが取得できる
Future<String> getDocumentsPathByRelativePath(String relativePath) async {
final String appdirpath = (await getApplicationDocumentsDirectory()).path;
return relativePath != null && relativePath.isNotEmpty
? appdirpath + relativePath
: null;
}
//FileImage(File(pictureURL)),で画像を表示
##書いている途中で気付いたこと
multi_image_pickerが使えなくなっていてmulti_image_picker2変更になっていた。
(恐らく同じやり方でいけると思います✨)