如果您正在构建一款允许用户上传照片的移动应用程序（可能是房产列表、个人资料图片或食物图片），Cloudinary是最简单、最强大的图像托管选项之一。
在这个简短的教程中，我们将直接使用Cloudinary APIfetch()和ExpoFormData来上传图像并返回立即优化并准备显示的 CDN URL。
☁️ 为什么选择 Cloudinary？ Cloudinary 提供：
免费套餐：每月充足的带宽和存储空间 自动优化： f_auto,q_auto为每台设备提供最佳格式和压缩 即时 CDN 交付：您的图像在全球范围内缓存并快速加载 无需后端：您可以使用未签名的预设直接从移动应用程序上传 🪄 步骤 1. 创建未签名的上传预设 在您的 Cloudinary 仪表板中：
前往“设置”→“上传”→“上传预设” 单击“添加上传预设” 放： 签名方式： Unsigned 文件夹：（ mynexthome或任何适合您的项目的文件夹） 保存并记下您的预设名称（例如uc9d4rhd） 您还会在仪表板顶部看到您的云名称- 我们很快就会需要它。
⚙️ 步骤 2. 在 Expo 中创建一个简单的测试上传 让我们创建一个新的开发屏幕或向 Expo 应用程序中的任何屏幕添加一个按钮。
// CloudinaryTest.tsx import React from 'react' import { View, Text, Button, Alert } from 'react-native'
export default function CloudinaryTest() { const testUpload = async () => { try { const data = new FormData() // You can use any test image URL here data.append( 'file', '' ) // 👇 your unsigned preset name data.append('upload_preset', 'uc9d4rhd') // optional: specify a folder to keep uploads organized data.append('folder', 'mynexthome')
const res = await fetch(
',
{
method: 'POST',
body: data,
}
)
const json = await res.json()
console.log('✅ Upload result:', json)
Alert.alert('Uploaded!', json.secure_url)
} catch (err: any) {
console.error('❌ Upload failed:', err)
Alert.alert('Error', err.message)
}
}
return ( <View style={{ padding: 20 }}> <Text style={{ fontSize: 18, marginBottom: 10 }}>Cloudinary Upload Test ) } 就是这样！按下按钮，您将看到成功警报，并且新图像出现在您的 Cloudinary 媒体库（mynexthome文件夹中）中。
🧩 工作原理 FormData()在 JavaScript 中，它就像一个虚拟的 HTML 表单。
每个表单.append()都会添加一个字段，发送给 Cloudinary API：
data.append('file', )
data.append('upload_preset', 'your_unsigned_preset')
data.append('folder', 'your_target_folder')
然后fetch()将其发送到 Cloudinary 端点：
/image/upload Cloudinary 使用 JSON 进行响应，其中包括文件的宽度secure_url、public_id高度等。
📱 iPhone 照片尺寸注意事项 现代 iPhone 可以拍摄非常高分辨率的照片，这些照片可能相当大：
模型 格式 典型尺寸 iPhone 12–14 赫伊克 1.5–3 MB iPhone 15（2400万像素） 赫伊克 2–5 MB JPEG 转换 JPEG 4–8 MB 这些照片太大，无法快速上传——而且用户不需要应用程序内的全摄像头分辨率。
上传之前，最好调整图像大小并进行压缩：
import * as ImageManipulator from 'expo-image-manipulator'
const compressed = await ImageManipulator.manipulateAsync( localUri, [{ resize: { width: 1600 } }], // 1600px wide is plenty for screens { compress: 0.7, format: ImageManipulator.SaveFormat.JPEG } ) 完成此步骤后，您的每张照片将约为0.8 MB–1.2 MB - 非常适合 Cloudinary 的免费套餐和快速的移动上传速度。
注意：IamgeManipulator 是一个本机模块，需要
npx expo prebuild // then npx expo run:ios or npx expo run:android 💨可选：自动优化显示网址 Cloudinary 会自动提供照片的优化版本。
您可以直接通过 URL 调整尺寸和质量，无需重新上传：
f_auto→ 对于兼容设备自动使用 WebP 或 AVIF q_auto→ 智能质量优化 w_1200→ 将宽度调整为 1200 像素 🧭 摘要 在 Cloudinary 中 设置未签名的预设 /image/upload使用您的预设名称 发布文件或 URL 立即获得针对所有设备优化的 CDN URL 上传前调整大小以保持 iPhone 照片轻巧 Cloudinary 负责托管、调整大小和缓存——您只需专注于您的应用程序。
下一步：
您可以扩展此演示以用于expo-image-picker用户选择的图像，或将其与您的 Supabase 用户身份验证配对以将每个上传与用户 ID 关联。作者www.mjsyxx.com
