React Native Expo如何将上传Firebase Storage的图片设为指定用户头像

1. 调整存储路径实现用户绑定 #

首先将原来随机生成文件名的存储路径，改为和用户UID绑定的固定路径，既方便关联用户，也便于后续安全规则管控：

• 存储路径统一设置为 user_avatars/{用户UID}，每个用户的头像固定占用一个路径，新上传的头像会直接覆盖旧文件，无需额外清理冗余资源。
• 前提：确保用户已经通过Firebase Auth完成登录，可获取到当前登录用户的uid字段。

2. 改造上传逻辑 #

修改后的代码示例如下：

const uploadImageToBucket = async () => {
  let blob;
  try {
    // 先校验登录态
    const currentUser = firebase.auth().currentUser;
    if (!currentUser) {
      alert("请先登录后再上传头像");
      return;
    }

    setUploading(true);
    blob = await getPictureBlob(image);

    // 替换为用户绑定的存储路径
    const ref = storage.ref().child(`user_avatars/${currentUser.uid}`);
    // 可选：添加图片元数据优化加载
    const metadata = {
      contentType: 'image/jpeg',
      cacheControl: 'public, max-age=31536000'
    };
    const snapshot = await ref.put(blob, metadata);

    const downloadURL = await snapshot.ref.getDownloadURL();
    // 同步头像URL到用户数据库
    await firebase.firestore()
      .collection('users')
      .doc(currentUser.uid)
      .update({
        avatarUrl: downloadURL,
        avatarUpdatedAt: firebase.firestore.FieldValue.serverTimestamp()
      });
    
    return downloadURL;
  } catch (e) {
    alert(e.message);
  } finally {
    blob?.close();
    setUploading(false);
  }
};

3. 配置Storage安全规则 #

在Firebase控制台的Storage规则页添加如下规则，防止越权修改他人头像，同时限制上传文件的类型和大小：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /user_avatars/{userId} {
      // 头像公开可读
      allow read: if true;
      // 仅用户本人可修改/删除自己的头像
      allow write, delete: if request.auth != null && request.auth.uid == userId;
      // 限制文件大小不超过2M，仅允许上传图片类型
      allow write: if request.resource.size < 2 * 1024 * 1024
                   && request.resource.contentType.matches('image/.*');
    }
  }
}

4. 可选优化 #

• 上传前对图片进行压缩、裁剪为正方形，减少存储占用和加载耗时
• 若需要保留历史头像，可在路径中加入时间戳后缀，上传成功后再删除旧头像文件
• 添加上传进度提示，优化用户体验

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