![](/img/trans.png)
[英]How to save firebase storage downloadURL to firestore collection?
[英]Vuejs + Firebase Storage upload multiply images into Firebase Storage and push all downloadURL into Firestore
我想将更多图像上传到 Firebase 存储,当我点击上传时,我希望图像的所有 downloadURL 以数组的形式发送到 Cloud Firestore。
现在,我可以将一张图片上传到 Firebase 存储,并且 downloadURL 位于我的 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 height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="display-3" align="center" justify="center">
<img class="preview" height="268" width="80%" :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
,它是一个滑块。 当我添加一张图像时,它会显示该图像,但是当您添加更多图像时,我希望它在滑块上显示所有图像。
一些图片:
这是一种异步编程,您需要组合承诺并使用Promise.all
函数解决它们, 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,以便稍后删除它们并释放存储空间。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.