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

Posted 2023-02-22

【中文标题】Vuejs + Firebase Storage 将多个图像上传到 Firebase Storage 并将所有 downloadURL 推送到 Firestore

【英文标题】：Vuejs + Firebase Storage upload multiply images into Firebase Storage and push all downloadURL into Firestore

【发布时间】：2021-02-06 00:52:46

【问题描述】：

我想将更多图像上传到 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  tile>
                    <v-row class="fill-height" align="center" justify="center">
                        <div class="display-3" align="center" justify="center">
                            <img class="preview"   :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 数据库

【参考方案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，以便以后删除它们并释放存储空间。