Expo Image Picker选中图片传递至API相关技术问题咨询

问题1：选中图片后转换为Blob格式构建FormData，适配仅接受二进制参数的API #

Expo Image Picker选图成功后返回的资源是本地uri格式，可直接通过fetch请求本地路径获取Blob对象，再构建FormData传参即可，完整实现逻辑如下：

import * as ImagePicker from 'expo-image-picker';

const pickAndUploadImage = async () => {
  // 调起相册选图
  const pickResult = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    quality: 1, // 可根据需求调整压缩质量
  });

  if (pickResult.canceled) return;

  const imageAsset = pickResult.assets[0];
  // 转换本地uri为Blob对象
  const imageBlob = await fetch(imageAsset.uri).then(res => res.blob());

  // 构建FormData
  const formData = new FormData();
  // 第三个参数为上传文件名，可根据需求自定义
  formData.append('file', imageBlob, `upload_${Date.now()}.jpg`);

  // 调用上传接口
  const uploadRes = await fetch('你的接口地址', {
    method: 'POST',
    body: formData,
    headers: {
      // 部分框架会自动识别multipart/form-data，不需要手动指定可删除
      'Content-Type': 'multipart/form-data',
    },
  });
};

问题2：仅返回image作为类型标识，无法获取精确图片类型的处理方案 #

该问题是Expo跨平台兼容逻辑导致的，安卓、iOS底层返回的类型字段格式不一致，框架做了统一封装，可通过以下两种方案获取精确类型：

• 方案1：从资源uri提取后缀匹配MIME类型（适合绝大多数场景）
  实现逻辑如下：

  // 后缀与MIME类型映射表，可根据需求扩展
  const IMAGE_MIME_MAP = {
    jpg: 'image/jpeg',
    jpeg: 'image/jpeg',
    png: 'image/png',
    gif: 'image/gif',
    webp: 'image/webp',
    heic: 'image/heic',
  };
  
  const getExactImageType = (imageUri) => {
    const fileSuffix = imageUri.split('.').pop().toLowerCase();
    return IMAGE_MIME_MAP[fileSuffix] || 'image/jpeg';
  };
  
  // 选图后调用即可获取精确类型
  if (!pickResult.canceled) {
    const exactType = getExactImageType(pickResult.assets[0].uri);
    // 可将type赋值给Blob或者FormData的文件名参数使用
  }
  

• 方案2：魔数校验（适合需要高精度判断、避免后缀篡改的场景）
  读取Blob对象的前4个字节，匹配不同格式图片的魔数即可：
  • JPEG魔数：FF D8 FF
  • PNG魔数：89 50 4E 47
  • GIF魔数：47 49 46 38
    可自行实现字节读取判断逻辑，无需额外引入依赖。

注意：如果选图时开启了allowsEditing配置或者设置了非1的quality值，Expo会自动将图片转码为JPEG格式，直接指定image/jpeg即可。

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