如何从React Native应用向AWS Amplify上传图片并生成链接

前置条件 #

• 已完成AWS Amplify项目初始化（运行过amplify init）
• React Native项目已配置Amplify基本环境（安装了aws-amplify并导入配置）

1. 配置Amplify存储服务 #

1. 执行命令添加存储模块：

   amplify add storage
   

2. 按提示选择：
   • 存储类型选 Content (Images, audio, video, etc.)
   • 自定义存储桶名称（或直接回车用默认）
   • 设置访问权限：根据需求选择，比如Auth users only（仅授权用户）或Guest users（允许匿名），建议初期选Auth users only并允许创建/读取/更新操作
3. 部署配置到AWS：

   amplify push
   

2. 安装依赖 #

根据项目类型选择安装：

• Expo项目：

  npx expo install @aws-amplify/storage expo-image-picker expo-permissions
  

• 裸React Native项目：

  npm install @aws-amplify/storage react-native-image-picker react-native-permissions
  # iOS需额外执行pod install
  cd ios && pod install && cd ..
  

3. 初始化Amplify（入口文件） #

在App.js或项目入口文件中确保Amplify已配置：

import Amplify from '@aws-amplify/core';
import config from './aws-exports';

Amplify.configure(config);

4. 实现图片选择功能 #

以Expo的expo-image-picker为例，实现从相册选择图片：

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

const pickImage = async () => {
  // 请求相册权限
  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (status !== 'granted') {
    alert('需要授予相册访问权限才能上传图片');
    return null;
  }

  // 打开相册选择图片
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true, // 允许裁剪
    quality: 0.8, // 压缩质量
  });

  return result.canceled ? null : result.assets[0].uri;
};

5. 上传图片到Amplify Storage并获取访问链接 #

使用Amplify的Storage模块完成上传，并生成可访问的链接：

import { Storage } from '@aws-amplify/storage';

const uploadImage = async (imageUri) => {
  // 生成唯一文件名，避免重复覆盖
  const fileName = `user-uploads/${Date.now()}-${Math.random().toString(36).slice(2)}.jpg`;

  try {
    // 上传图片，设置存储级别为public（公开访问）
    await Storage.put(fileName, imageUri, {
      contentType: 'image/jpeg', // 根据实际图片类型调整，比如png填image/png
      level: 'public', // 可选：private(仅当前用户)、protected(同组用户)、public(公开)
    });

    // 获取公开访问链接
    const imageUrl = await Storage.get(fileName, { level: 'public' });
    return imageUrl;
  } catch (err) {
    console.error('图片上传失败:', err);
    throw err;
  }
};

注意：如果选择private级别，获取链接时会生成带签名的临时链接（默认有效期1小时），适合敏感图片；public级别生成永久公开链接，适合无需保密的图片。

6. 将链接存入数据模型 #

假设你的Amplify DataStore模型（比如Post）包含imageUrls字符串数组字段，上传成功后将链接存入模型：

import { DataStore } from '@aws-amplify/datastore';
import { Post } from './models'; // 替换为你的模型导入路径

const saveImageUrl = async (targetPostId, imageUrl) => {
  // 查询目标记录
  const targetPost = await DataStore.query(Post, targetPostId);
  if (!targetPost) return;

  // 更新记录的imageUrls数组
  await DataStore.save(Post.copyOf(targetPost, (updated) => {
    updated.imageUrls = [...updated.imageUrls, imageUrl];
  }));
};

7. 整合流程（触发上传的按钮逻辑） #

把上述步骤整合到一个按钮点击事件中：

const handleUpload = async () => {
  const imageUri = await pickImage();
  if (!imageUri) return;

  try {
    const imageUrl = await uploadImage(imageUri);
    await saveImageUrl('你的目标PostID', imageUrl); // 替换为实际的记录ID
    alert('图片上传并保存成功！');
  } catch (err) {
    alert('上传失败，请检查网络或权限');
  }
};

// 在组件中使用：
// <Button title="上传图片" onPress={handleUpload} />

关键注意事项 #

• CORS配置：如果上传时出现跨域错误，可通过amplify update storage修改存储桶的CORS规则，允许你的APP域名访问
• 权限调试：如果上传失败，检查Amplify Auth的用户状态（确保用户已登录，若配置了Auth-only权限）
• 文件大小限制：默认存储桶有文件大小限制，可通过AWS控制台修改S3存储桶的配置调整

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