我想将多个文件上传到 firebase，然后将数据上传到 firebase

Question

所以问题是我必须将多个图像数组上传到 firebase，然后从他们那里获取链接以将其上传到数据库中，所以对象必须是 this

var product = {
         id: userId,
         title: productName,
         price: precio,
         description: description,
         avgRating: 5,
         ratings: 5,
         image: url,//this is the uploaded images link
    }

所以要上传所有数据，我这样做： 上传图片：

const uploadImage = async (uri) => {
    return new Promise((resolve, reject) => {
      let xhr = new XMLHttpRequest();
      xhr.onerror = reject;
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          resolve(xhr.response);
        }
      };

      xhr.open("GET", uri);
      xhr.responseType = "blob";
      xhr.send();
    });
  };



const loadData1 = async () => {
    setLoading(true);
    console.log("pro 1");
    filteredUri.forEach((xUri)=>{       
      var imagId = Math.random().toString(36).substr(2, 9);                        
      uploadImage(xUri)
        .then((resolve) => {
          let ref = firebase
            .storage()
            .ref()
            .child(`images/${userId}/${imagId}`);
          ref
            .put(resolve)
            .then((resolve) => {
              console.log("Images uploaded");
            })
            .catch((error) => {
              console.log(error);
              alert("Error");
            });
        })
        .catch((error) => {
          console.log(error);
        });
      })
    console.log("pro 2");
    await loadData2();
  };

加载数据：

  async function loadData2() {
//////Get Images Url
        firebase
          .storage()
          .ref(`images/${userId}`)
          .listAll()
          .then(function (result) {
            result.items.forEach(function (imageRef) {
              displayImage(imageRef);
            });
          })
          .catch(function (error) {
            console.log(error);
          });
        function displayImage(imageRef) {
          imageRef
            .getDownloadURL()
            .then(function (url) {
        //////////////////////////////Load Data
              firebase
                .database()
                .ref(`productos/${userId}`)
                .set({
                  id: userId,
                  title: productName,
                  price: precio,
                  description: description,
                  avgRating: 5,
                  ratings: 5,
                  image: url,
                })
                .then(() => {
                  console.log("Data uploaded");
                  setLoading(false);
                  setTimeout(function () {
                    Alert.alert(
                      "All uploaded",
                      "All right",
                      [
                        {
                          text: "Ok",
                          onPress: () => {},
                        },
                      ]
                    );
                  }, 1000);
                  navigation.goBack();
                })
                .catch((error) => {
                  console.log(error);
                  alert("Error, try later");
    
                  firebase
                    .storage()
                    .ref()
                    .child(`images/${userId}`)
                    .delete()
                    .then(function () {
                      console.log("Error");
                    })
                    .catch(function (error) {
                      console.log(
                        "error"
                      );
                    });
                });
            })
            .catch(function (error) {
              console.log(error);
            });
        }
      }

这里的问题是执行 loadData1 然后 loadData2 但 loadData2 不等到 loadData1 完成 所以它返回这个

//pro 1
//pro 2
//Images uploaded
//Images uploaded
//Images uploaded

Answer 1

如果要在图片上传完成后运行loadData2，运行如下。

const loadData1 = () => {
    setLoading(true);
    console.log("pro 1");
    filteredUri.forEach((xUri)=>{       
      var imagId = Math.random().toString(36).substr(2, 9);                        
      uploadImage(xUri)
        .then((resolve) => {
          let ref = firebase
            .storage()
            .ref()
            .child(`images/${userId}/${imagId}`);
          ref
            .put(resolve)
            .then((resolve) => {
              console.log("Images uploaded");
              loadData2();
            })
            .catch((error) => {
              console.log(error);
              alert("Error");
            });
        })
        .catch((error) => {
          console.log(error);
        });
      })
    console.log("pro 2");
    
  };