我有一个有效的解决方案，用于将多个图像上传到Firebase。我从vue-croppa插件获得了图像，该插件在手机上效果很好。 我为所有图像生成BLOB文件。然后我将它们上传到Firebase存储，并接收一个URL，该URL放置在数据库的对象中。 （这是用于registring工具的项目。）
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>