使用 Vuex 和 FIrebase 存储多个图像。 （等待图片上传）[重复]

Question

我有一个可行的解决方案，可以将多张图片上传到 Firebase。我从一个 vue-croppa 插件中获取图像，该插件非常适用于手机。 我为所有图像生成 BLOB 文件。然后我将它们上传到firebase存储，并收到一个我放在数据库对象中的url。 （这是一个注册工具的项目）。

Vuex 代码（JS）：

createTool ({ commit }, payload) {
  let toolData = {
    croppas: payload.croppas,
    title: payload.title
  }
  var imageURLS = []
  // for Each image in images (croppas (plugin for vue btw) to get blob(s))
  toolData.croppas.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 => {
                  imageURLS.push(downloadURL)
                })
            })
          }     
          })
  })

  const mergedToolData = {
    title: payload.title,
    URLS: imageURLS
  }

  firebase.database().ref('tools').push(mergedToolData)
    .then((data) => {
      const key = data.key
      commit('createTool', {
        title: payload.title,
        URLS: imageURLS,
        id: key
      })
    })
},

图像被上传，我收到了存储在 imageURLS [] 中的 downloadURL。 挑战在于代码不会等待 for 循环完成并在将“工具”数据上传到数据库之前检索所有 URL。因此，URLS 不会注册到该工具。 我认为解决方案是异步等待系统，但我真的不知道该怎么做。

这是一个用于测试的 .vue 文件：

     <template>
      <v-layout column align-center>
        <v-flex xs12 sm6 class="mt-5">
          <croppa v-for="(c, i) in croppas"
            :key="i"
            v-model="croppas[i]"
            :width="300"
            :height="300"
            :placeholder="'Choose an image'"
            @new-image="croppas.push({})"
            v-show="i === croppas.length - 1 || c.imageSet">
          </croppa>
          <croppa
            :v-if="this.croppas == ''"
            :width="300"
            :height="300"
            :placeholder="'Choose an image'"
            @new-image="croppas.push({})">
          </croppa>
          </v-flex>
          <v-flex xs12 class="my-4">
            <v-btn @click="onCreateTool" color="#D08513" dark class="darkCustomBtn">Upload</v-btn>
            <v-btn to="/tools" flat class="customBtn ml-3" >Cancel</v-btn>
          </v-flex>
      </v-layout>
    </template>

    <script>
    export default {
      data () {
        return {
          title: '',
          croppas: []
        }
      },
      methods: {
        onCreateTool() {      
          this.$store.dispatch('createTool', { croppas: this.croppas, title: this.title })

        }
      }
    }
    </script>

Answer 1

答案已经存在：Answer。 正是您正在寻找的:)。
这是一种多种方法，但这种方法实际上是在代码上并且有一个谷歌错误处理程序。