javascript - Firebase 上传功能每次的工作方式都不同

Question

我有一个用于上传新项目的表单，其中包含一些字段和一张图像。我构建该函数的方式是，它首先在 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);

然后我有一个云函数，它将新上传的文件的网址添加到新文档中(但我不认为问题存在，因为当我说图像未上传时，我的意思是我不这样做甚至在存储中都看不到它):

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
    }
  };

Answer 1

您需要正确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
   });

};

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