如何将Flutter Image Picker获取的图片URL存入数据库并复用？

问题背景 #

已完成ImagePicker配置，通过以下代码可正常获取相册图片并渲染：

Future handleEditProfilePic() async {
  final XFile? image = await picker.pickImage(
    source: ImageSource.gallery,
    maxWidth: 300,
    maxHeight: 300,
    imageQuality: 50,
  );

  setState(() {
    _image = image;
  });
}

获取到的路径为临时目录文件（示例：/private/var/mobile/Containers/Data/Application/7021FEB0-EE3A-48CE-8E77-3F2A5D32867C/tmp/image_picker_B8C28D76-F5E7-48B7-B280-05013590CAC8-9304-0000102466C56AE8.jpg），使用Image.file(File(_image!),fit: BoxFit.cover);可正常显示，但将该路径存入数据库后，重启App取出使用即失败。核心原因是临时路径仅在当前App生命周期有效，重启或系统清理后会被删除。

解决步骤 #

1. 添加依赖 #

引入path_provider库获取App持久化存储目录：

dependencies:
  path_provider: ^2.1.0

2. 修改图片选择逻辑，复制文件到持久化目录 #

将临时文件复制到App的文档目录（该目录下的文件不会被系统随意删除，App重启后仍可访问）：

import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:path/path.dart' as path;

Future handleEditProfilePic() async {
  final XFile? image = await picker.pickImage(
    source: ImageSource.gallery,
    maxWidth: 300,
    maxHeight: 300,
    imageQuality: 50,
  );

  if (image == null) return;

  // 获取App文档目录路径
  final Directory appDocDir = await getApplicationDocumentsDirectory();
  // 保留原文件名及后缀
  final String fileName = path.basename(image.path);
  // 复制临时文件到持久化目录
  final File persistedImage = await File(image.path).copy('${appDocDir.path}/$fileName');

  setState(() {
    // 存储持久化路径而非临时路径
    _persistedImagePath = persistedImage.path;
  });

  // 将_persistedImagePath存入数据库
}

3. 重启后加载图片 #

从数据库取出持久化路径，直接加载：

Image.file(File(_persistedImagePath), fit: BoxFit.cover);

额外提示 #

• 定期清理不再使用的图片文件，避免占用过多设备存储空间
• iOS需在Info.plist中配置NSPhotoLibraryUsageDescription以获取相册访问权限
• Android需在AndroidManifest.xml中配置相应的存储权限

内容的提问来源于stack exchange，提问作者Aaron Balthaser