React Native Expo：如何将ImagePicker选择的图片保存至应用主目录

要实现将选中图片保存到Expo应用的私有主目录，需要借助expo-file-system库来完成文件操作，以下是具体步骤和完整代码：

1. 安装依赖 #

首先安装Expo文件系统工具库：

npx expo install expo-file-system

2. 完整实现代码 #

import { useState } from 'react';
import * as ImagePicker from 'expo-image-picker';
import * as FileSystem from 'expo-file-system';

export default function ImageSaveComponent() {
  const [selectedImage, setSelectedImage] = useState(null);
  const [savedImagePath, setSavedImagePath] = useState(null);

  const pickImage = async () => {
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 1,
        base64: true,
      });

      if (result.canceled) {
        console.log('用户取消选择');
        return;
      }

      const asset = result.assets[0];
      setSelectedImage(asset.uri);

      // 获取应用私有主目录路径
      const appRootDir = FileSystem.documentDirectory;
      // 生成唯一文件名，避免覆盖
      const fileName = `saved_img_${Date.now()}.${asset.uri.split('.').pop()}`;
      const targetPath = appRootDir + fileName;

      // 方法1：直接复制原文件（推荐，高效无需处理编码）
      await FileSystem.copyAsync({
        from: asset.uri,
        to: targetPath,
      });

      // 方法2：通过base64数据写入（适合需要预处理图片的场景）
      // await FileSystem.writeAsStringAsync(targetPath, asset.base64, {
      //   encoding: FileSystem.EncodingType.Base64,
      // });

      setSavedImagePath(targetPath);
      console.log('图片已保存至应用目录：', targetPath);
    } catch (err) {
      console.error('保存失败：', err);
    }
  };

  return (
    <div>
      <button onClick={pickImage}>选择并保存图片</button>
      {selectedImage && <img src={selectedImage} alt="选中的图片" style={{width: '200px'}} />}
      {savedImagePath && <p>保存路径：{savedImagePath}</p>}
    </div>
  );
}

关键说明 #

• FileSystem.documentDirectory：这是Expo为应用提供的私有主目录，不同平台对应系统实际路径不同，但Expo做了统一封装，应用可自由读写此目录，卸载应用时该目录会被删除。
• 唯一文件名：用时间戳命名是为了避免重复保存时覆盖已有文件，你也可以根据需求自定义命名规则。
• 两种保存方式：直接复制原文件效率更高，无需处理编码；若需要对图片数据进行修改（比如压缩、滤镜），再使用base64写入的方式。
• 错误处理：用try-catch捕获文件操作可能出现的异常，比如权限问题、文件损坏等，避免应用崩溃。

内容的提问来源于stack exchange，提问作者Tre Seibert