问题描述
我正在使用vue.js和firestore进行食品配送电子商务项目。
现在，我的“产品”集合中有两个字段。一个字段用于存储商店形象，称为店面，另一字段用于存储食物样本图片，称为样本。
数据结构类似于下面的屏幕截图。
我已经上传了这些图片，但是我也想在用户个人资料编辑页面中更新图片。
我要实现的是，更新“产品”（Product）集合字段，并更新云存储中的图片。
我想知道如何实现这一目标。
Pictures.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',() => {
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:",}
}
</script>
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）