使用expo-image-picker上传图片至Firestore时如何获取文件格式

问题原因 #

Firebase Storage 默认通过两个维度识别文件类型：

• 存储路径的文件后缀
• 上传时传入的contentType元数据
  不带后缀上传时，服务端拿不到文件类型标识，就会默认归类为文本文档；硬编码.png的写法无法兼容jpg、webp等其他图片格式，核心问题是没有从expo-image-picker的返回结果里读取所选图片的真实格式信息。

具体实现步骤 #

1. 改造选图逻辑，留存文件格式信息 #

expo-image-picker的返回结果本身就携带了图片的MIME类型、原文件名信息，不需要手动从URI解析（安卓端返回的content协议URI不带后缀，手动解析会失效）。
首先新增状态存储文件相关信息，改造pickImage函数：

// 新增状态存储文件后缀、MIME类型
const [selectedImage, setSelectedImage] = useState(null);
const [fileExt, setFileExt] = useState(null);
const [fileMime, setFileMime] = useState(null);

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

  // 注意：expo-image-picker 14.0+版本用result.canceled判断取消，老版本用result.cancelled，自行适配
  if (!result.cancelled){
    // 14.0+版本从assets数组取资源信息，老版本直接从result取
    const asset = result.assets ? result.assets[0] : result;
    setSelectedImage(asset.uri);
    setFileMime(asset.type);

    // 优先从原文件名取后缀，取不到就通过MIME类型映射
    if (asset.fileName) {
      const ext = asset.fileName.split('.').pop();
      setFileExt(`.${ext}`);
    } else {
      // MIME到后缀的映射表，覆盖常见图片格式
      const mimeMap = {
        'image/png': '.png',
        'image/jpeg': '.jpg',
        'image/webp': '.webp',
        'image/gif': '.gif'
      };
      setFileExt(mimeMap[asset.type] || '.jpg'); // 兜底用.jpg
    }
  }
}

2. 改造上传逻辑，动态拼接后缀+补充类型元数据 #

上传时除了动态拼接获取到的文件后缀，额外传入contentType元数据，双保险避免文件类型识别错误：

let Enter = async () => {
  // 前置校验，未选图时中断执行
  if (!selectedImage || !fileExt || !fileMime) return;

  const storage=getStorage();
  // 动态拼接后缀，替换硬编码的.png
  const reference=ref(storage, `${title}${fileExt}`);

  const img=await fetch(selectedImage);
  const bytes=await img.blob();

  // 上传时携带类型元数据，彻底解决类型识别错误问题
  const uploadMetadata = {
    contentType: fileMime
  };
  await uploadBytes(reference, bytes, uploadMetadata);

  await createEntry(title,descr);
};

注意事项 #

• 不要尝试从selectedImage的URI字符串中拆分后缀：iOS端URI可能带后缀，但安卓端返回的content://类型本地URI不包含真实文件后缀，解析结果不可靠。
• 上传时传入contentType元数据是最稳妥的方案，Firebase Storage会优先读取该字段识别文件类型，不受路径后缀影响。

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