Javascript Vue:更新firestore和firebase云存储中的映像
我正在使用vue.js和firestore进行食品配送电子商务项目 现在我的“产品”集合中有两个字段。一个字段用于名为storefront的商店建筑图像，另一个字段用于名为sample的食品样本图片 数据结构如下图所示。 我已经上传了这些图片，但我还想更新用户配置文件编辑页面中的图片 我想要实现的是，更新“产品”集合字段，并更新云存储中的图片 我想知道我如何才能做到这一点 图片.vue 前三种方法用于“店面”图片，其他方法用于“示例”图片 模板字段Javascript Vue:更新firestore和firebase云存储中的映像,javascript,firebase,vue.js,google-cloud-firestore,google-cloud-storage,Javascript,Firebase,Vue.js,Google Cloud Firestore,Google Cloud Storage,我正在使用vue.js和firestore进行食品配送电子商务项目 现在我的“产品”集合中有两个字段。一个字段用于名为storefront的商店建筑图像，另一个字段用于名为sample的食品样本图片 数据结构如下图所示。 我已经上传了这些图片，但我还想更新用户配置文件编辑页面中的图片 我想要实现的是，更新“产品”集合字段，并更新云存储中的图片 我想知道我如何才能做到这一点 图片.vue 前三种方法用于“店面”图片，其他方法用于“示例”图片 模板字段 <template> &
<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>
图片必须高达800px 1000px
店面图片
上传
样图
上传
<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>
从“@/components/ErrorBar”导入ErrorBar
从“epic微调器”导入{SpringSpinner}
从“@/plugins/firebase”导入fireApp
const firebase=require（“firebase”）；
要求（“消防基地/消防仓库”）；
const db=firebase.firestore（）；
导出默认值{
名称：“图片”，
数据（）{
返回{
店面：假，
示例：错误，
deleteStatusStorefront：正确，
deleteStatusSample:true，
uploadStatusStorefront:true，
uploadStatusSample:true，
秀:假,，
产品：{
店面：“，
样本：“
}
}
},
组成部分：{
弹簧纺纱机
},
创建（）{
let ref=db.collection（'Product'）.doc（this.$route.params.id）
参考get（）
。然后（doc=>{//Docdoc
如果（文件存在）{
this.product.storefronts=doc.data（）.storefront
console.log（this.product.storefronts）
this.product.samples=doc.data（）.sample
console.log（this.product.samples）
}否则{
log（“没有这样的文档！”）；
}
})
},
方法：{
上传店面（e）{
if（e.target.files[0]）{
this.showStorefront=true
console.log（'a'）
让file=e.target.files[0]；
var storageRef=fireApp.storage（）にする
让uploadTask=storageRef.put（文件）；
uploadTask.on（'state_changed'，（快照）=>{
}，（错误）=>{
console.log（错误）
}, () => {
uploadTask.snapshot.ref.getDownloadURL（）。然后（（downloadURL）=>{
this.product.storefronts.push（下载URL）
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（）。然后（（doc）=>{
如果（文件存在）{
console.log（this.product.storefronts）
docRef.update（{
店面：这个。产品。店面
})
}
}).catch（（错误）=>{
log（“获取文档时出错：”，错误）；
});
},
storefrontSubmitProduct（）{
var user=firebase.auth（）.currentUser；
var docRef=db.collection（'Product'）.doc（user.uid）
docRef.get（）。然后（（doc）=>{
如果（文件存在）{
docRef.update（{
店面：这个。产品。店面
})
}否则{
docRef.set（{
店面：这个。产品。店面
}，{merge:true}）
}
}).catch（（错误）=>{
log（“获取文档时出错：”，错误）；
});
},
上传样本（e）{
if（e.target.files[0]）{
this.showSample=true