Expo React Native如何上传图片到Cloudinary获取png/jpg后缀的远程URL

1. 前置依赖安装与权限配置 #

• 首先安装expo-image-picker依赖：
  npx expo install expo-image-picker
• 打开项目根目录的app.json，添加对应平台的相册访问权限配置：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSPhotoLibraryUsageDescription": "需要访问相册选择上传图片"
      }
    },
    "android": {
      "permissions": ["READ_EXTERNAL_STORAGE"]
    }
  }
}

2. Cloudinary 前置配置 #

提前在Cloudinary后台获取两个必要参数：

• 你的Cloudinary账号对应的cloud_name
• 新建一个unsigned类型的上传预设（upload preset），无需签名即可在客户端直接上传，避免密钥泄露风险。

3. 选图逻辑实现 #

调用expo-image-picker的API唤起相册，选择图片后获取本地临时uri：

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

const pickImage = async () => {
  // 先请求相册访问权限
  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (status !== 'granted') {
    alert('请先授予相册访问权限');
    return;
  }

  // 唤起相册选择图片
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    quality: 0.8, // 可自行调整图片压缩质量，范围0-1
  });

  if (!result.canceled) {
    // 选择成功，拿到本地临时uri，调用上传方法
    const localUri = result.assets[0].uri;
    await uploadToCloudinary(localUri);
  }
};

4. 上传图片到Cloudinary并获取可用URL #

将选中的图片本地uri封装为FormData，调用Cloudinary上传接口，上传成功后获取符合React Native加载要求的图片直链：

const uploadToCloudinary = async (localUri) => {
  // 替换为你自己的cloud_name和unsigned上传预设名
  const cloudName = '你的cloud_name';
  const uploadPreset = '你的上传预设名';

  const formData = new FormData();
  formData.append('file', {
    uri: localUri,
    type: 'image/jpeg',
    name: 'upload.jpg',
  });
  formData.append('upload_preset', uploadPreset);

  try {
    const response = await fetch(`https://api.cloudinary.com/v1_1/${cloudName}/image/upload`, {
      method: 'POST',
      body: formData,
    });
    const data = await response.json();
    // 此处拿到的secure_url就是后缀为jpg/png的标准图片链接，可直接在React Native的Image组件中加载
    const imageUrl = data.secure_url;
    // 调用你自己的后端接口，把imageUrl存入业务数据库
    await saveUrlToYourDatabase(imageUrl);
  } catch (error) {
    console.log('上传失败：', error);
  }
};

5. 存储URL到数据库 #

拿到imageUrl后，按照你现有业务的后端接口规范，将该URL作为参数发起请求，存入你的业务数据库即可，后续前端渲染时直接使用该URL即可正常加载图片。

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