1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Flutterのmulti_image_pickerでパスを保存する方法

Posted at

#取得した画像をパスで保存したい(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変更になっていた。
(恐らく同じやり方でいけると思います✨)

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?