React Native中Firebase图片上传后无法更新用户image字段及uploadTask报错

先解决uploadTask.on is not a function报错 #

这个错误的核心原因是Firebase SDK版本不匹配或API调用方式错误：

• 如果你用的是Firebase v9+模块化SDK，uploadBytes返回的是Promise（没有on方法），只有uploadBytesResumable返回的UploadTask对象才支持on监听上传状态。
• 如果你仍在使用v8命名空间风格SDK，可能是uploadTask初始化错误，比如没正确获取Storage引用。

正确的上传代码（v9+模块化） #

首先确保导入正确的Firebase方法：

import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
import { doc, updateDoc, getFirestore } from "firebase/firestore";

然后处理图片上传+保存URL到Firestore：

const uploadAndSaveImage = async (localImageUri, userId) => {
  // 1. 将React Native本地URI转为Blob（必须步骤，RN无法直接上传URI）
  const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = () => resolve(xhr.response);
    xhr.onerror = () => reject(new TypeError("图片转Blob失败"));
    xhr.responseType = "blob";
    xhr.open("GET", localImageUri, true);
    xhr.send(null);
  });

  // 2. 初始化Storage引用和上传任务
  const storage = getStorage();
  const storageRef = ref(storage, `user-profiles/${userId}`);
  const uploadTask = uploadBytesResumable(storageRef, blob);

  // 3. 监听上传状态并处理后续逻辑
  uploadTask.on(
    "state_changed",
    (snapshot) => {
      // 可选：处理上传进度
      const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log(`上传进度：${progress}%`);
    },
    (error) => {
      // 上传失败处理
      console.error("上传错误：", error);
      blob.close();
    },
    async () => {
      // 4. 上传完成，获取下载URL
      const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);
      console.log("图片下载地址：", downloadURL);
      blob.close();

      // 5. 保存URL到Firestore的useraccounts集合
      const db = getFirestore();
      const userDocRef = doc(db, "useraccounts", userId);
      try {
        await updateDoc(userDocRef, { image: downloadURL });
        console.log("图片URL已成功保存到Firestore");
      } catch (firestoreError) {
        console.error("保存URL到Firestore失败：", firestoreError);
      }
    }
  );
};

简化版（无需监听上传进度） #

如果不需要监听上传状态，直接用uploadBytes的Promise写法更简洁，也不会触发uploadTask.on的错误：

const uploadAndSaveImage = async (localImageUri, userId) => {
  const blob = await // 同上转Blob代码

  try {
    const storage = getStorage();
    const storageRef = ref(storage, `user-profiles/${userId}`);
    // 直接上传并获取快照
    const snapshot = await uploadBytes(storageRef, blob);
    // 获取下载URL
    const downloadURL = await getDownloadURL(snapshot.ref);
    // 保存到Firestore
    const db = getFirestore();
    const userDocRef = doc(db, "useraccounts", userId);
    await updateDoc(userDocRef, { image: downloadURL });
    console.log("上传+保存全部完成");
  } catch (error) {
    console.error("操作失败：", error);
  } finally {
    blob.close();
  }
};

检查Firebase权限规则 #

确保你的Firestore和Storage规则允许当前用户操作：

Firestore规则示例（仅允许用户修改自己的文档） #

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /useraccounts/{userId} {
      allow read, update: if request.auth != null && request.auth.uid == userId;
    }
  }
}

Storage规则示例（仅允许用户上传自己的头像） #

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /user-profiles/{userId} {
      allow write: if request.auth != null && request.auth.uid == userId;
      allow read: if request.auth != null;
    }
  }
}

其他注意事项 #

• 确保用户已正确登录，userId是当前登录用户的uid，避免因权限不足导致Firestore更新失败。
• 所有异步操作必须用try/catch包裹，避免出现unhandled promise rejection警告。
• 如果使用Expo，可以用expo-file-system替代XMLHttpRequest来转Blob，代码更简洁：

  import * as FileSystem from 'expo-file-system';
  const blobBase64 = await FileSystem.readAsStringAsync(localImageUri, { encoding: 'base64' });
  // 辅助函数：base64转Blob
  function base64ToBlob(base64) {
    const byteCharacters = atob(base64);
    const byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += 512) {
      const slice = byteCharacters.slice(offset, offset + 512);
      const byteNumbers = new Array(slice.length);
      for (let i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }
      const byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }
    return new Blob(byteArrays, { type: 'image/jpeg' });
  }
  const blob = base64ToBlob(blobBase64);
  

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