我知道这有一个简单的答案,但是我似乎被卡住了。我在表格中输入了上传图片。在完成了一些教程之后,我已经成功创建了上载方法。我的问题是,一旦将图片上传到Firestore存储,我就使用this.$emit('imgurl', downloadURL)
我的问题是我不知道如何获取该值,因此当用户提交表单时,URL将添加到数据库中。
部分代码:
HTML:
<div class="field avatar">
<label for="avatar">Avatar</label>
<input type="file" name="imgurl" accept="image/*" @change="detectFiles($event.target.files)">
<div class="progress-bar green" :style="{ width: progressUpload + '%'}">{{ progressUpload }}%</div>
<img class="avatar" v-bind:src="this.downloadURL">
</div>
方法:
detectFiles (fileList) {
Array.from(Array(fileList.length).keys()).map( x => {
this.upload(fileList[x])
})
},
upload (file) {
var storage = firebase.storage();
this.uploadTask = storage.ref('avatars/'+file.name).put(file);
}
观看:
watch: {
uploadTask: function() {
this.uploadTask.on('state_changed', sp => {
this.progressUpload = Math.floor(sp.bytesTransferred / sp.totalBytes * 100)
},
null,
() => {
this.uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
this.downloadURL = downloadURL
this.$emit('imgurl', downloadURL)
})
})
}
}
添加到数据库:
db.collection('teams').add({
team_name: this.team_name,
team_id: this.team_id,
bio: this.bio,
url: this.imgurl,
}).then(() => {
this.$router.push({ name: 'Admin' })
}).catch(err => {
console.log(err)
})
答案 0 :(得分:0)
我找到了答案。我添加了一个隐藏的输入字段
<input type="hidden" name="imgurl" v-model="imgurl">
并将发射替换为this.imgurl = downloadURL
答案 1 :(得分:0)
您可以将函数作为prop传递给子组件,然后通过传递downloadURL
作为参数来调用此函数。
HTML
<child passURL="getDownloadURL">
JS
data: {
return {
downloadURL: null
}
},
methods: {
getDownloadURL: function(url) {
this.downloadURL = url
}
}
JS
props: ['passURL'],
在观察者内部,您可以拨打电话
this.passURL(downloadURL)
代替$ emit。