javascript - Firebase上载功能每次都不同

我有一个上载新项目的表格，其中有一些字段和图像。
我构建该函数的方式是，它首先在Firestore中设置新文档，然后上载图像，然后重置表单。

问题在于它并不总是有效。有时会上传图片，有时甚至不会重置表单（重置取决于图片上传）。

这是不一致的，所以我无法弄清楚到底发生了什么。

这是上传功能：

export const newItem = (values, image, setValues) => () => {
  const newDoc = db.collection("items").doc();

  newDoc.set({ ...values, id: newDoc.id }).then(() => {
    storageRef
      .child(`images/items/${newDoc.id}`)
      .put(image)
      .then(result => {
        console.log(result);
        setValues({});
      });
  });
};

我称它为：

newItem({ ...values, is_public }, imageObj, setValues);

然后，我有了这个云函数，它将新上传的文件的url添加到新文档中（但是我不认为问题出在这里，因为当我说未上传图像时，我的意思是什至不在存储中查看）：

exports.writeFileToDatabase = functions.storage.object().onFinalize(object => {
  const bucket = defaultStorage.bucket();
  const path = object.name as string;
  const file = bucket.file(path);

  return file
    .getSignedUrl({
      action: "read",
      expires: "03-17-2025"
    })
    .then(results => {
      const url = results[0];
      const silcedPath = path.split("/", 3);

      switch (silcedPath[1]) {
        case "user-avatars":
          return db
            .collection("users")
            .doc(silcedPath[2])
            .set({ avatar: url }, { merge: true });

        case "items":
          return db
            .collection("items")
            .doc(silcedPath[2])
            .set({ image: url }, { merge: true });

        default:
          return null;
      }
    });
});

编辑：

这是我选择文件的方式：

  <input
    id="image"
    className="new-item__upload"
    type="file"
    onChange={handleImageChange}
  />

然后是handleImageChange：

  const handleImageChange = e => {
    if (e.target.files[0]) {
      const image = e.target.files[0];
      setSelectedImage(URL.createObjectURL(image));
      setImageObj(image); // This is what end up being given to the function to upload
    }
  };

最佳答案

您需要正确地chain由Firebase异步操作（set()和put()）返回的promise，如下所示：

export const newItem = (values, image, setValues) => () => {
  const newDoc = db.collection("items").doc();

  newDoc.set({ ...values, id: newDoc.id })
   .then(() => {
     return storageRef         //Here return the Promise returned by the put() method
      .child(`images/items/${newDoc.id}`)
      .put(image);
   })
   .then(snapshot => {
       console.log(snapshot);
       setValues({});
   })
   .catch(e => {
      console.error(e.message);
      //You should throw an error here, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
   });

};

还建议在Promises链的末尾添加catch()方法调用，以便在出错时获取更多详细信息。

关于javascript - Firebase上载功能每次都不同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60146906/