从手机上传文件时，Firebase 存储（网络）无法正常工作

Question

我正在使用 Firebase 创建一个网站。用户应该能够上传和更新他们的个人资料图片，只要它小于 10mb，并且是 .jpg、.png 或 .gif 文件。

应该发生什么：

1. 用户上传有效图片
2. 在 Firebase 存储中创建或更新引用 /users/{uid}/profileImage
3. 使用 getDownloadURL() 方法获取图片的 URL，并将其作为文本存储在 Firestore 中的用户个人资料信息下
4. 使用该 URL 作为头像的src。

当我尝试在我的计算机 (Windows 10) 上执行此操作时，它运行良好。但是，当我尝试在手机（iPhone 8；iOS 14.7.1）上执行此操作时，它不起作用。从手机上传的图片到达/users/{uid}/profileImage，但由于权限问题，即使用户按照规则在手机浏览器上进行了身份验证，也无法正确获取downloadURL。

以下是 (1) 获取文件和 (2) 更新用户头像的代码：

// Grab dp img and store it in file var
let file = {}
const chooseFile = (e) => {
    // Get the file from local machine
    file = e.target.files[0]
    console.log(file )
}

// Store dp in storage as file, and db as link
const updateDp = (currentUser) => {
    // Check if new dp has been added/exists.
    if ("name" in file) {
        // Check if uploaded file is an image
        if (file.type !== "image/jpeg" && file.type !== "image/png" && file.type !== "image/gif") {
            alert("You can only upload .jpeg, .jpg, .png and .gif under 10mb")
            return
        }

        // Check image file size
        if (file.size/1024/1024>10) {
            alert("The image size must be under 10mb")
            return
        }

        // Create storage ref & put the file in it
        storage
            .ref("users/" + currentUser.uid + "/profileImage")
            .put(file)
            .then(() => {
                // success => get download link, put it in DB, update dp img src
                storage
                    .ref("users/" + currentUser.uid + "/profileImage")
                    .getDownloadURL()
                    .then(imgURL => {
                        db
                            .collection("users")
                            .doc(currentUser.uid)
                            .set({
                                dp_URL: imgURL,
                                dp_URL_last_modified: file.lastModifiedDate
                            }, {
                                merge: true
                            })
                        document.querySelector("#nav_dp").src = imgURL;
                    })
                console.log("success")
            }).catch(() => {
                console.log(error.message)
            })
    } else {
        console.log("Empty/no file")
    }

}

以下是我的 Firebase 存储规则：

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

Answer 1

除了console.log("success") 会在您获得downloadURL 之前记录，因为getDownloadURL() 返回一个Promise，对我来说安全规则和代码看起来不错。尝试将您的函数更改为异步函数，如下所示：

// Store dp in storage as file, and db as link
const updateDp = async (currentUser) => {
  //             ^^^^^
  // Check if new dp has been added/exists.
  if ("name" in file) {
    try {
      // Check if uploaded file is an image
      if (
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/gif"
      ) {
        alert("You can only upload .jpeg, .jpg, .png and .gif under 10mb");
        return;
      }

      // Check image file size
      if (file.size / 1024 / 1024 > 10) {
        alert("The image size must be under 10mb");
        return;
      }

      // Create storage ref & put the file in it
      const userPicRef = storage.ref(
        "users/" + currentUser.uid + "/profileImage"
      );
      await userPicRef.put(file);
      console.log("Image uploaded")
      // success => get download link, put it in DB, update dp img src
      const imgURL = await UserPicRef.getDownloadURL();
      console.log(`Image URL: ${imgURL}`)
      await db.collection("users").doc(currentUser.uid).set(
        {
          dp_URL: imgURL,
          dp_URL_last_modified: file.lastModifiedDate,
        },
        {
          merge: true,
        }
      );
      console.log("Document Added")
      document.querySelector("#nav_dp").src = imgURL;
    } catch (error) {
      console.log(error);
    }
  } else {
    console.log("Empty/no file");
  }
};

Answer 2

回答我自己的问题。

原来，我使用的是file.lastModifiedDate，这是一种折旧的方法。它适用于在 Android 上运行的 Google Chrome 应用程序，但不适用于 iOS。

为了解决这个问题，我改用了file.lastModified。