React Native中借助AWS Storage上传图片至S3 Bucket的问题咨询

1. 修正GraphQL Schema（解决必填字段问题） #

你之前的Schema里profile_pic和gallery被设为必填项，导致创建用户时必须输入。只需将这两个字段改为可选即可：

type User @model {
  id: ID!
  name: String!
  userName: String! @index(name: "byUserName", queryField: "userByUserName")
  bio: String!
  streak: Int!
  profile_pic: S3Object # 设为可选，创建用户时可忽略
  gallery: [S3Object] # 数组默认可选，无需额外标记
}

type S3Object {
  bucket: String!
  region: String!
  key: String!
}

修改后执行amplify push更新API，创建用户时就不用强制传入图片字段，后续通过更新mutation补充即可。

2. 配置S3 Storage权限（解决无权限问题） #

默认的Storage权限配置不合理，需要设置用户只能访问自己的文件目录：

• 运行amplify update storage命令
• 选择Content (Images, audio, video, etc.)
• 选择Auth users only
• 开启Restrict access by path，设置路径为user/{cognito-identity.amazonaws.com:sub}/*（sub是当前登录用户的Cognito唯一ID，自动关联用户）
• 确认配置后执行amplify push生效

这样用户仅能操作自己user/{userId}/路径下的文件，避免权限报错。

3. 完整实现流程（上传+关联GraphQL+展示） #

步骤1：上传文件到S3

在React Native中用Amplify Storage上传头像，按用户ID分类存储：

import { Storage, Auth } from 'aws-amplify';

const uploadProfilePic = async (imageUri) => {
  const user = await Auth.currentAuthenticatedUser();
  const userId = user.attributes.sub;
  const key = `user/${userId}/profile.jpg`;

  try {
    const result = await Storage.put(key, {
      uri: imageUri,
      contentType: 'image/jpeg',
    }, { level: 'private' });
    return result; // 返回包含bucket、region、key的对象
  } catch (err) {
    console.error('上传失败:', err);
    throw err;
  }
};

步骤2：关联GraphQL，更新用户信息

上传成功后，调用mutation将S3文件信息存入User表：

import { API, graphqlOperation } from 'aws-amplify';
import { updateUser } from './src/graphql/mutations';

const updateUserProfilePic = async (userId, s3Object) => {
  try {
    await API.graphql(graphqlOperation(updateUser, {
      input: {
        id: userId,
        profile_pic: s3Object,
      },
    }));
  } catch (err) {
    console.error('更新用户信息失败:', err);
    throw err;
  }
};

步骤3：查询并展示图片

查询用户信息后，用Storage.get获取文件临时访问URL：

import { Image } from 'react-native';
import { useState, useEffect } from 'react';
import { Storage } from 'aws-amplify';

const getProfilePicUrl = async (s3Object) => {
  if (!s3Object) return null;
  try {
    return await Storage.get(s3Object.key, {
      level: 'private',
      expires: 3600, // URL有效期1小时
    });
  } catch (err) {
    console.error('获取图片URL失败:', err);
    return null;
  }
};

const ProfilePic = ({ s3Object }) => {
  const [imageUrl, setImageUrl] = useState(null);

  useEffect(() => {
    s3Object && getProfilePicUrl(s3Object).then(setImageUrl);
  }, [s3Object]);

  return imageUrl ? (
    <Image source={{ uri: imageUrl }} style={{ width: 100, height: 100, borderRadius: 50 }} />
  ) : (
    <Text>无头像</Text>
  );
};

4. 默认头像的处理 #

给新用户设置默认头像可按以下方式操作：

1. 提前将默认头像上传到S3的public/default-profile.jpg路径（设置为公共可读）
2. 创建用户时传入默认头像的S3信息：

const defaultProfilePic = {
  bucket: '你的S3桶名',
  region: '你的AWS区域',
  key: 'public/default-profile.jpg',
};

await API.graphql(graphqlOperation(createUser, {
  input: {
    id: userId,
    name: 'xxx',
    userName: 'xxx',
    bio: 'xxx',
    streak: 0,
    profile_pic: defaultProfilePic,
  },
}));

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