Vuejs + Firebase Storage 将多个图像上传到 Firebase Storage 并将所有 downloadURL 推送到 Firestore

Question

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

现在，我可以将一张图片上传到 Firebase 存储，并且下载网址在我的 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>

我的 vue js 代码

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 数据库

Answer 1

这是一种异步编程，您需要组合 Promise 并使用 Promise.all 函数解决它们，如下所示：

async function uploadStorage(path, file){
    return new Promise((resolve, reject)=>{
        storage.ref(path).put(f).then(async r=>{
            r.ref.getDownloadURL().then(url=>{
                resolve({
                    success: true,
                    url: url
                })
            }).catch(e=>{
                resolve({
                    success: false,
                    msg: e.message
                })
            })
        }).catch(e=>{
            resolve({
                success: false,
                msg: e.message
            })
        })
    })
}

let path = "path-in-storage";

// CREATE AN ARRAY OF PROMISES
let allOperations = arrayOfFiles.map(file=>{
    // FILE IN BLOB / FILE FORMAT
    return uploadStorage(path, file);
})

// GET URLS
let allURLS = await Promise.all(allOperations).then(result=>{
    return result.filter(res=>{
        return res.success;
    }).map(res=>{
        return res.url;
    })
})

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