JS и Firebase. Загрузите несколько изображений, дождитесь URL и загрузите в базу данных

Question

[Извините за двойной вопрос]

Это моя рабочая JS-функция для загрузки изображений. Проблема в том, что функция для загрузки «инструмента» (данных) в базу данных, не дожидается imageURL из Firebase. Мне нужно что-то вроде async / await без использования тайм-аута. Я хочу загрузить данные в firebase, как только будут загружены все imageURL.

Вот 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-объект в базу данных
• Получите 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)
},