JS 和 Firebase。上传多张图片，等待 URL 并上传到数据库

Question

[抱歉重复问题]

这是我上传图片的工作 JS 函数。问题在于将“工具”（数据）上传到数据库的功能，不要等待来自 Firebase 的 imageURL。我需要某种 async / await 而不使用超时。我想在上传所有 imageURL 后立即将数据上传到 firebase。

这里是 JS 代码（vuex）：

createTool ({ commit }, payload) {
  let toolData = {
    croppas: payload.croppas,
    title: payload.title
  }
  var imageURLS = []

                    // outputArray = imageURLS
  function forEachImage(images, outputArray) {
    return new Promise((resolve) => {
    images.forEach(file => {
        file.generateBlob(
            blob => {
              if (blob != null) {
              let rand = (Math.random().toString(36).substring(2, 16) + Math.random().toString(36).substring(2, 16)).toUpperCase()
              let imageRef = firebase.storage().ref('toolImages/').child(rand)
              imageRef.put(blob)
                .then( data => {
                  imageRef.getDownloadURL()
                    .then( downloadURL => {
                      console.log('The Download Link is: ', downloadURL)
                      outputArray.push(downloadURL)
                      console.log('The imageArray after push is: ', outputArray)
                    })
                })
            }     
            })
    })
    resolve()
    })
    }

    async function uploadEachImage () {
    await forEachImage(toolData.croppas, imageURLS)
    console.log(imageURLS)
    const mergedToolData = {
      title: payload.title,
      URLS: imageURLS
    }
    console.log('Uploading to database...')
    firebase.database().ref('tools').push(mergedToolData)
      .then((data) => {
        const key = data.key
        commit('createTool', {
          title: payload.title,
          URLS: imageURLS,
          id: key
        })
      })
    }
  uploadEachImage()
},

我在这里的尝试是等待函数“forEachImage”完成。

函数将：

• 循环浏览所有图片
• 生成一个 blob（图像）
• 将 blob 上传到 firebase
• 接收 URL 并将其放入“全局”变量 (imageURLS)

我想要的结果是这样的： 在该函数完成所有图像后，异步函数继续并将数据上传到数据库（还包含 imageURLS[]. 正如我所提到的，我想在不使用超时的情况下执行此操作。 （计时器）。

Answer 1

我设法找到了一个具有预期结果的解决方案，尽管它是一个相当原始的解决方案。

createTool ({ commit, getters }, payload) {
  commit('setLoading', true)
  const toolData = {
    title: payload.title,
    selectedCategory: payload.selectedCategory,
    description: payload.description,
    kontaktInfo: payload.kontaktInfo,
    creatorId: getters.user.id
  }
  const croppas = {
    croppas: payload.croppas
  }

  var imageURLS = []
  async function forEachImage(images, outputArray) {
    return new Promise((resolve) => {
      images.forEach(async (file) => {
        file.generateBlob(
            async (blob) => {
              if (blob != null) {
                let rand = (Math.random().toString(36).substring(2, 16) + Math.random().toString(36).substring(2, 16)).toUpperCase()
                let imageRef = firebase.storage().ref('toolImages/').child(rand).put(blob)
                  .then( data => {
                    return data.ref.getDownloadURL()
                  })
                let url = await imageRef
                outputArray.push(url)
                console.log('The imageArray after push is: ', outputArray)
                console.log('Antall croppas er: ', croppas.croppas.length)
    console.log('Antall images in imageURLS: ', imageURLS.length + 1)
    if (croppas.croppas.length == imageURLS.length + 1) {
      resolve()
    }
            }     
            })

    })
    })
    }

    async function uploadEachImage () {
    await forEachImage(croppas.croppas, imageURLS)
      .then(() => {
        console.log('Waiting is over')
      })
    console.log(imageURLS)
    const mergedToolData = {
      ...toolData,
      URLS: imageURLS
    }
    console.log('Uploading to database...')
    firebase.database().ref('tools').push(mergedToolData)
      .then((data) => {
        const key = data.key
        commit('createTool', {
          title: payload.title,
          URLS: imageURLS,
          id: key
        })
        console.log(croppas.croppas.length)
        console.log('Antall images in imageURLS: ', imageURLS.length)
      })
      .catch((error) => {
        console.log(error)
      })
      commit('setLoading', false)
    }
  uploadEachImage()
  commit('setLoading', false)
},