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上载到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)
},

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

1 个答案: