React Native使用expo-image-picker选图时如何获取图片文件名

expo-image-picker的launchImageLibraryAsync方法默认返回结果仅包含uri、type、宽高字段，不会直接返回文件名，返回的uri指向应用专属临时缓存目录下的图片文件，可根据业务场景选择对应方案获取文件名： #

方案一：从uri截取文件名（推荐上传场景使用） #

如果只是构造FormData完成接口上传，不需要获取图片在系统相册内的原始名称，直接从返回的uri字符串末尾截取文件名即可，该名称是系统为临时缓存文件生成的唯一标识，完全满足上传校验要求。
实现代码：

// 工具方法：从uri中提取文件名
const extractFileName = (uri) => uri.slice(uri.lastIndexOf('/') + 1);

const pickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images, 
    aspect: [4, 3],
    quality: 1,
    base64: false,
  });

  console.log(result);

  if (!result.cancelled) {
    const fileName = extractFileName(result.uri);
    // 构造上传用的FormData
    const formData = new FormData();
    formData.append('image', {
      uri: result.uri,
      type: result.type,
      name: fileName,
    });
    // 后续执行上传逻辑即可
    setImage(result.uri);
  }
};

方案二：获取相册原始文件名 #

如果业务要求必须拿到图片在系统相册中存储的原始名称，搭配expo-file-system读取文件元信息即可实现：

1. 安装依赖

   npx expo install expo-file-system
   

2. 代码实现

   import * as FileSystem from 'expo-file-system';
   
   const pickImage = async () => {
     let result = await ImagePicker.launchImageLibraryAsync({
       mediaTypes: ImagePicker.MediaTypeOptions.Images, 
       aspect: [4, 3],
       quality: 1,
       base64: false,
     });
   
     if (!result.cancelled) {
       const fileMeta = await FileSystem.getInfoAsync(result.uri, { metadata: true });
       // 做兜底兼容，元信息读不到时自动截取uri文件名
       const originalName = fileMeta.metadata?.name || result.uri.slice(result.uri.lastIndexOf('/') + 1);
       console.log('原始文件名：', originalName);
       setImage(result.uri);
     }
   };
   

注意事项 #

• 构造FormData时name字段禁止留空，否则多数后端框架无法正常解析文件参数
• 若遇到文件后缀识别异常，可根据返回的type字段手动补全后缀：type为image/jpeg时后缀为.jpg，image/png时后缀为.png
• 非必要不要开启base64返回选项，会造成内存占用陡增，低端机容易出现崩溃

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