如何获取上传到 Firebase 的图像的 URL 并将其添加到 MongoDB 对象？

Question

我正在开发一个博客，用户可以提出一个标题并编写一些内容来创建博客文章。还有一个选项可以为您的帖子添加图片。

    <Form.Group className="my-2" controlId="content">
      <label>Image</label>
      <input
        type="file"
        placeholder="Image"
        onChange={handleImageChange}
      ></input>
    </Form.Group>

图像存储在 Firebase 内。发布文章和上传图像都按预期工作。

  const handleImageChange = (e) => {
    if (e.target.files[0]) {
      setImage(e.target.files[0]);
    }
  };

  const submitHandler = async (e) => {
    e.preventDefault();

    const username = userInfo.name;

    const imageName = image.name;
    const imageRef = ref(storage, `images/${imageName}`);

    uploadBytes(imageRef, image).then((snapshot) => {
      getDownloadURL(snapshot.ref).then((url) => {
        setImageUrl(url);
      });
    });

    try {
      const res = await write({
        title,
        content,
        username,
        placement,
        image: imageUrl,
      }).unwrap();
      navigate("/");
      toast.success("Article Added!");
    } catch (err) {
      toast.error(err?.data?.message || err.error);
    }
  };

handleImage

仅选择您选择的第一张图片并上传。

submitHandler

完成大部分代码。

它首先上传图像，然后生成 URL。

setImageUrl

获取 URL 并将其添加到

state

，并在其正下方将 URL 添加到博客的

image

路径。在 SingleBlog 组件内部，我正在映射数据，包括图像。

<div>
  <h1 className={styles.title}>{blog.title}</h1>
  <p>by {blog.author}</p>
  <img src={blog.image} alt="" fill className={styles.image} />
  <p>{blog.content}</p>
</div>

我遇到的问题（我认为）是在创建博客文章之后生成 URL，因此经常会为对象留下图像路径的空字符串。如果我在文章架构中包含 required: true

，有时可以足够快地生成 URL 并将其包含在路径中。

我想知道解决我的问题的最佳方案是什么。我想做的是创建一个包含标题、内容和图像路径的博客，然后一次性上传所有内容并将其保存在我的 MongoDB 中，以便我可以映射数据并使用

img

 标签在屏幕上显示图像.

Answer 1

在 Promise 上调用

then

 不会像 

await

 那样阻止该代码的进度。它只是设置一个回调，以便稍后在 Promise 解析时调用。您应该对 Firebase Storage 返回的承诺使用 wait 以使代码按顺序执行。

const snapshot = await uploadBytes(imageRef, image);
const url = await getDownloadURL(snapshot.ref)
setImageUrl(url);