javascript - Vue：更新 Firestore 和 Firebase 云存储中的图像

Question

我正在使用 vue.js 和 firestore 开展食品配送电子商务项目。

现在我的“产品”集合中有两个字段。一个字段用于商店建筑图像，称为店面，另一个字段用于食品样品图片，称为样品。

数据结构如下图所示。

我已经上传了这些图片，但我也想更新用户个人资料编辑页面中的图片。

我想要实现的是，更新“产品”集合字段，同时更新云存储中的图片。

我想知道如何实现这一目标。

图片.vue

前三种方法用于“店面”图片，其他方法用于“样品”图片。

模板字段

<template>
    <div>
        <div class="ml-5 mb-5 picture-size">
            <span>The pictures has to be up to 800px X 1000px</span>
        </div>
        
        <b-container class="bv-example-row">
            <b-row>
                <b-col md="6" class="">
                    <p>Storefront picture</p>
                       <div class="image-area" v-for="(storefront, index) in product.storefronts" v-bind:key="index" >
                          
                            <img :src="storefront" alt="" class="picture">
                           
                        </div>
                        <div v-if="uploadStatusStorefront" class="upload">
                             <input type="file"  name="imageSample" @change="uploadStorefront" id="file" accept="image/*">
                                <label for="file" class="Upload-image">
                                    Upload
                                </label>
                        </div>
                    
                    <div class="d-flex justify-content-center m-3">
                        <div v-if="showStorefront">
                            <b-button class="loginbutton-color" type="submit">
                                <spring-spinner
                                    :animation-duration="3000"
                                    :size="27"
                                    color="#ff1d5e"
                                    class="loading"
                                />
                            </b-button>
                        </div>
                    </div>
                </b-col>
                 <b-col md="6" class="">
                    <p>Sample picture</p>
                       <div class="image-area" v-for="(sample, index) in product.samples" v-bind:key="index" >
                          
                            <img :src="sample" alt="" class="picture">
                            
                        </div>
                        <div v-if="uploadStatusSample" class="upload">
                             <input type="file"  name="imageStorefront" @change="uploadSample" id="file" accept="image/*">
                                <label for="file" class="Upload-image">
                                    Upload
                                </label>
                        </div>
                    
                    <div class="d-flex justify-content-center m-3">
                        <div v-if="showSample">
                            <b-button class="loginbutton-color" type="submit">
                                <spring-spinner
                                    :animation-duration="3000"
                                    :size="27"
                                    color="#ff1d5e"
                                    class="loading"
                                />
                            </b-button>
                        </div>
                    </div>
                </b-col>
            </b-row>
        </b-container>
        
    </div>
</template>

脚本字段

<script>
import ErrorBar from '@/components/ErrorBar'
import { SpringSpinner } from 'epic-spinners'
import fireApp from '@/plugins/firebase'
const firebase = require("firebase");
require("firebase/firestore");
const db = firebase.firestore();

    export default {
        name: "Pictures",
    data() {
      return {
        showStorefront: false,
        showSample: false,
        deleteStatusStorefront: true,
        deleteStatusSample: true,
        uploadStatusStorefront: true,
        uploadStatusSample: true,
        show: false,
        product: {
            storefronts: "",
            samples: ""
        }
      }
    },
    components: {
        SpringSpinner
    },
    created() {
        let ref = db.collection('Product').doc(this.$route.params.id)
        ref.get()
        .then(doc => {  //Docdoc
              if (doc.exists) {
                this.product.storefronts = doc.data().storefront
                console.log(this.product.storefronts)

                this.product.samples = doc.data().sample
                console.log(this.product.samples)
                
              } else {
                  console.log("No such document!");
              }  
        })
             
    },
    methods: {
            uploadStorefront(e) {
                if(e.target.files[0]) {
                    this.showStorefront = true
                    console.log('a')
                    let file = e.target.files[0];
                    var storageRef = fireApp.storage().ref('ProUser/'+ Math.random() + '_'  + file.name);//uniquenameにする
                    let uploadTask = storageRef.put(file);
                    uploadTask.on('state_changed', (snapshot) => {
                    }, (error) => {
                        console.log(error)
                    }, () => {
                        uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                        this.product.storefronts.push(downloadURL)
                        this.storefrontSubmit()
                        this.storefrontSubmitProduct()
                        this.showStorefront = false
                        this.deleteStatusStorefront = true
                        this.uploadStatusStorefront = false
                        });
                    });
                }
            },


            storefrontSubmit() {
                var user = firebase.auth().currentUser;
                var docRef = db.collection('ProUser').doc(user.uid)
                docRef.get().then((doc) => {
                    if (doc.exists) {
                        console.log(this.product.storefronts)
                        docRef.update({ 
                            storefront: this.product.storefronts
                        })
                    } 
                }).catch((error) => {
                    console.log("Error getting document:", error);
            });
            },

            storefrontSubmitProduct() {
                var user = firebase.auth().currentUser;
                var docRef = db.collection('Product').doc(user.uid)
                docRef.get().then((doc) => {
                    if (doc.exists) {
                        docRef.update({ 
                            storefront: this.product.storefronts
                        })
                    } else {
                        docRef.set({ 
                            storefront: this.product.storefronts
                        }, { merge: true })
                        
                    }
                }).catch((error) => {
                    console.log("Error getting document:", error);
            });
            
            },

            uploadSample(e) {
                if(e.target.files[0]) {
                    this.showSample = true
                    let file = e.target.files[0];
                    var storageRef = fireApp.storage().ref('Sample/'+ Math.random() + '_'  + file.name);//uniquenameにする
                    let uploadTask = storageRef.put(file);
                    uploadTask.on('state_changed', (snapshot) => {
                    }, (error) => {
                        console.log(error)
                    }, () => {
                        uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                        this.product.samples.push(downloadURL)
                        this.sampleSubmit()
                        this.showSample = false
                        this.deleteStatusSample = true
                        this.uploadStatusStorefront = false
                        });
                    });
                }
            },

            sampleSubmit() {
                var user = firebase.auth().currentUser;
                console.log('aaaaa')
                var docRef = db.collection('Product').doc(user.uid)
                docRef.get().then((doc) => {
                    if (doc.exists) {
                        docRef.update({ 
                            sample: this.product.samples
                        })
                        .then(() => {
                            this.show = false
                        })
                    } else {
                        docRef.set({ 
                            sample: this.product.samples
                        })
                        .then(() => {
                            this.show = false
                        })
                    }
                }).catch((error) => {
                    console.log("Error getting document:", error);
            });
            },

        }
    }
</script>

标签： javascriptfirebasevue.jsgoogle-cloud-firestoregoogle-cloud-storage