如何在Expo Image Picker中获取文件的原始名称？

默认情况下，Expo ImagePicker返回的是处理后的缓存文件路径，无法直接拿到原始文件名。要获取原始文件名，你可以通过以下两种方法解决：

方法一：开启完整元数据请求 #

在launchImageLibraryAsync的配置参数中添加requestFullMetadata: true，开启后返回的assets对象中会包含fileName字段，对应文件的原始名称。

修改后的代码：

const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 1,
        // 添加该行开启完整元数据请求
        requestFullMetadata: true,
    });

    console.log(result);

    if (!result.canceled) {
        const selectedAsset = result.assets[0];
        setImage(selectedAsset.uri);
        // 提取原始文件名
        const originalFileName = selectedAsset.fileName;
        console.log('原始文件名:', originalFileName);
    }
};

方法二：通过FileSystem读取文件元数据 #

如果方法一在部分平台不生效，可以使用Expo FileSystem读取文件的原始元数据：

首先确保导入FileSystem：

import * as FileSystem from 'expo-file-system';

然后修改代码：

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

    console.log(result);

    if (!result.canceled) {
        const selectedAsset = result.assets[0];
        setImage(selectedAsset.uri);
        
        // 读取文件元数据获取原始文件名
        const fileInfo = await FileSystem.getInfoAsync(selectedAsset.uri, {
            includeMetadata: true
        });
        const originalFileName = fileInfo.metadata?.originalFilename;
        console.log('原始文件名:', originalFileName);
    }
};

注意：部分Android设备可能因系统限制无法获取到原始文件名，这种情况下可考虑让用户手动输入文件名作为补充方案。

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