Javascript Vuejs+；Firebase存储将多个图像上载到Firebase存储，并将所有下载的URL推送到Firestore

我想将更多图像上传到Firebase存储中，当我点击upload时，我想将图像的所有下载URL以数组形式发送到云Firestore

现在，我可以将一个图像上传到Firebase存储，下载的URL位于我的Firestore上

模板代码

<v-layout>
    <v-flex xs12 sm12 md12 xl12>
        <div class="choosePhoto">
            <v-btn @click="click1">choose photo</v-btn>
        </div>
    </v-flex>
</v-layout>

<v-layout wrap class="justify-center">
    <v-flex xl6 >
        <input type="file" ref="input1" style="display: none" @change="previewImage" accept="image/*" multiple>
    </v-flex>
</v-layout>

<v-layout>
    <v-flex xl12 v-if="imageData != null">                     
        <v-carousel v-model="model">
            <v-carousel-item>
                <v-sheet height="100%" tile>
                    <v-row class="fill-height" align="center" justify="center">
                        <div class="display-3" align="center" justify="center">
                            <img class="preview" height="268" width="80%" :src="img1">
                        </div>
                    </v-row>
                </v-sheet>
            </v-carousel-item>
        </v-carousel>
    </v-flex>    
</v-layout> 

<v-layout wrap class="justify-center">
    <v-flex xl2>
        <v-btn color="pink" @click="create">upload</v-btn>
    </v-flex>
</v-layout>

data() {
    return {
        img1: '',
        imageData: null,
        firstName: '',
        lastName: '',
        email: '',
        placeName: '',
        phoneNumber: '',
        price: '',
        caption: '',
        currentUser: firebase.auth().currentUser.uid
    }
},
methods: {
    create() {
        db.collection('Lands').add({
            firstName: this.firstName,
            lastName: this.lastName,
            email: this.email,
            placeName: this.placeName,
            phoneNumber: this.phoneNumber,
            price: this.price,
            caption: this.caption,
            photo: this.img1       
        })
        .then((response) => {
            console.log(response)
        })
        .catch(err => {
            console.log(err)
        })
        this.firstName = '';
        this.lastName = '';
        this.email = '';
        this.placeName = '';
        this.phoneNumber = '';
        this.price = '';
        this.caption = '';
        this.photo = '';
    },
    click1() {
        this.$refs.input1.click()   
    },
    previewImage(event) {
        this.uploadValue = 0;
        this.img1 = null;
        this.imageData = event.target.files[0];
        this.onUpload()
    },
    onUpload() {
        this.img1 = null;
        const storageRef = firebase
            .storage()
            .ref(`${this.currentUser}`)
            .child(`${this.imageData.name}`)
            .put(this.imageData);
            storageRef.on(`state_changed`, snapshot => {
                this.uploadValue = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
            }, error => {
                console.log(error.message);
            }, () => {
                this.uploadValue = 100;
                storageRef.snapshot.ref.getDownloadURL().then((url) => {
                this.img1 = url;
                console.log(this.img1);
            });
        }
    );
}

如何将更多图像上载到存储？我有一个

v-carousel

，它是一个滑块。当我添加一个图像时，它会显示该图像，但当您添加更多图像时，我希望它显示滑块上的所有图像

一些图片：

我的表格

选择按钮和滑块下方

和我的Firestore数据库

---

这是一种异步编程，您需要一组承诺，并使用

承诺解决它们。所有
功能如下：

异步函数上传存储（路径、文件）{
返回新承诺（（解决、拒绝）=>{
storage.ref（path）.put（f）.then（async r=>{
r、 参考getDownloadURL（）。然后（url=>{
决心({
成功：没错，
url:url
})
}).catch（e=>{
决心({
成功：错，
msg:e.message
})
})
}).catch（e=>{
决心({
成功：错，
msg:e.message
})
})
})
}
让path=“存储中的路径”；
//创建一系列承诺
让allOperations=arrayOfFiles.map（文件=>{
//BLOB/FILE格式的文件
返回上传存储（路径、文件）；
})
//获取URL
让allURLS=等待承诺。全部（allOperations）。然后（result=>{
返回result.filter（res=>{
回报成功；
}).map（res=>{
返回res.url；
})
})

您可能希望存储路径和文档ID，以便以后删除它们并释放存储空间