将 base64 上传到 firebase 存储并取回下载 url

Question

调用的第一个函数是addPostHandler，它正在调用函数storeImage。在 storeImage 函数中，postData.postImage 是字符串数组（Images 转换为 base64）。我在这里要做的是映射 postData.postImage 中的所有图像，然后将其上传到 firestore，然后下载 Url 并将其推送到图像 Url 中。在我上传完所有图片并获得 URL 之后，最后我希望 console.log("Printing....") 到运行.

错误是 storeImage 函数返回空字符串而不是下载Url。

const index = () => {
  const storeImage = async (postData: PostType) => {
    const imageUrl: string[] = [];
    const storage = getStorage();
    postData.postImage.map((image, i) => {
      const storageRef = ref(
        storage,
        `ImagesOfPosts/${postData.userId}/${postData.postId}/image ${i}`
      );
      uploadString(storageRef, image, "data_url", {
        contentType: "image/jpg",
      }).then(() => {
        getDownloadURL(storageRef)
          .then((result) => {
            imageUrl.push(result);
          })
          .catch((error) => {
            console.error(error);
          });
      });
    });

    console.log(imageUrl);

    return imageUrl;
  };

  const addPostHandler = async (enteredPostData: PostType) => {
    const imageUrl = await storeImage(enteredPostData);
    console.log("Printing......."); 
}

Answer 1

您的顶级代码不会等到上传和下载 URL 完成，所以您会看到它 return 一个空数组。

由于您要上传多张图片，因此您需要使用 Promise.all() 仅在所有图片都完成后解析 storeImage。

总的来说是这样的：

const storeImage = async (postData: PostType) => {
  const storage = getStorage();
  const imageUrl = Promise.all(postData.postImage.map((image, i) => {
    const storageRef = ref(
      storage,
      `ImagesOfPosts/${postData.userId}/${postData.postId}/image ${i}`
    );
    return uploadString(storageRef, image, "data_url", {
      contentType: "image/jpg",
    }).then(() => {
      return getDownloadURL(storageRef);
    });
  });

  return imageUrl;
};

将 base64 上传到 firebase 存储并取回下载 url

Uploading base64 to the firebase storage and getting back the download url

javascript

firebase

typescript

reactjs

firebase-storage