如何使用Expo应用将图片上传至Cloudflare Images？

一、Cloudflare Images 上传问题修复 #

你的代码存在3个核心问题导致上传失败：

1. FormData 处理兼容性问题 #

React Native 中直接使用 Blob 会引发跨环境兼容问题，Expo ImagePicker 返回的本地 URI 可直接传入 FormData，无需转换为 Blob。

2. 手动设置 Content-Type 导致解析失败 #

手动指定 multipart/form-data 会覆盖 Axios 自动生成的请求边界（boundary），导致 Cloudflare 无法正确解析表单数据，应让 Axios 自动处理该请求头。

3. 文件名与参数设置不规范 #

Cloudflare Images 要求上传文件带正确扩展名，id 参数为可选项，无需强制设置。

修复后的上传函数代码：

const uploadImage = async (imageAsset) => {
  setUploading(true);
  // 保留原文件扩展名，避免格式识别错误
  const fileExt = imageAsset.uri.split('.').pop();
  const fileName = `${uuidv4()}-${produceName.replace(/\s+/g, '-').toLowerCase()}.${fileExt}`;

  try {
    const formData = new FormData();
    // 直接使用本地URI构造FormData文件项
    formData.append('file', {
      uri: imageAsset.uri,
      name: fileName,
      type: imageAsset.mimeType || `image/${fileExt}`
    });

    console.log('Uploading to Cloudflare...');
    
    const response = await axios.post(
      `https://api.cloudflare.com/client/v4/accounts/${CLOUDFLARE_ACCOUNT_ID}/images/v1`,
      formData,
      {
        headers: {
          'Authorization': `Bearer ${CLOUDFLARE_API_TOKEN}`,
          // 移除手动设置的Content-Type，由Axios自动生成
        },
        timeout: 30000,
      }
    );

    console.log('Cloudflare response:', response.data);

    if (response.data.success) {
      const imageUrl = response.data.result.variants[0];
      setItemImage(imageUrl);
      Alert.alert('Success', 'Image uploaded successfully');
    } else {
      throw new Error('Upload failed: ' + JSON.stringify(response.data.errors));
    }
  } catch (error) {
    console.error('Error uploading image:', error);
    if (error.response) {
      console.error('Error data:', error.response.data);
      console.error('Error status:', error.response.status);
      console.error('Error headers:', error.response.headers);
    } else if (error.request) {
      console.error('Error request:', error.request);
    } else {
      console.error('Error message:', error.message);
    }
    Alert.alert('Error', `Failed to upload image: ${error.message}`);
  } finally {
    setUploading(false);
  }
};

二、适配 Expo 的低成本图片托管服务推荐 #

如果 Cloudflare 仍无法正常使用，或需要更经济的选项，推荐以下服务：

• Backblaze B2：存储成本极低（$0.005/GB/月），支持 S3 兼容 API，Expo 中可直接用 Axios 或 AWS SDK 上传，无需额外适配。
• Firebase Storage：免费额度包含5GB存储与10GB带宽，适合小型应用，Expo 有官方 expo-firebase-storage 库，集成流程简单。
• Supabase Storage：开源方案，免费层提供5GB存储，API 设计简洁，与 Expo 无缝集成，支持直接上传本地文件 URI。

三、Digital Ocean Spaces 上传提示 #

若尝试使用 Spaces，需注意：

• 确保 API 密钥拥有存储桶的读写权限
• 上传时需设置正确的 ACL（如 public-read）以保证图片可访问
• 同样避免手动设置 multipart/form-data 请求头，交由 Axios 自动处理

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