如何将多个图像上传到Firebase存储并返回多个downloadURL
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将多个图像上传到Firebase存储并返回多个downloadURL相关的知识,希望对你有一定的参考价值。
我们正在开发一个简单的电子商务应用,我们需要上传多个产品图片。使用Vuejs和Vue-Croppa,我们需要将图像上传到firebase存储,检索下载URL,然后在我们将该产品添加到数据库时将这些URL包含在数组中。
<croppa v-for="(c, i) in croppas"
:key="i"
v-model="croppas[i]"
:width="150"
:height="150"
@new-image="croppas.push({})"
v-show="i === croppas.length - 1 || c.imageSet"
></croppa>
我们的方法:
addProduct() {
this.showSuccess = true
let {details} = this
this.croppas.forEach(file => {
file.generateBlob(
blob => {
let rand = (Math.random().toString(36).substring(2, 16) + Math.random().toString(36).substring(2, 16)).toUpperCase()
let imagesRef = storageRef.child('productimages/' + rand)
let downloadURL
imagesRef.put(blob).then((snap) => {
imagesRef.getDownloadURL().then(function(downloadURL) {
console.log('File available at', downloadURL)
})
})
},
'image/jpeg',
0.8
)
})
let shop = this.userStore.id
let {details} = this
console.log(shop)
let createdAt = new Date().toString()
let createdBy = this.currentUser.uid
console.log(createdBy)
let productImageUrl = downloadURL
fb.productsCollection.add({ details, createdAt, createdBy, shop})
.then( doc => {
fb.productsCollection.doc(doc.id).update({
id: doc.id,
})
})
.then( doc => {
fb.productsCollection.doc(doc.id).update({
productImages: productImageUrl
})
})
setTimeout(() => {
this.showSuccess = false
}, 4000)
},
现在,我们收到一个控制台错误:
Firebase Storage: Invalid argument in 'put' at index 0: Expected Blob or File.
此外,productImageUrl = downloadURL
只适用于一个文件,其中可能会有更多。我怎么能用数组做这个工作?
答案
对于你的第二个问题.....
为您要上传的每个图片设置承诺。
所以在你的循环中调用一个类似于下面的方法(我刚刚从我的一个项目中抓住了这个):
uploadImageAsPromise (imageFile) {
const self = this;
return new Promise(function (resolve, reject) {
var storageRef = firebase.storage().ref("/imagestestnew/"+imageFile.name);
//Upload file
var task = storageRef.put(imageFile);
//Update progress bar
task.on('state_changed',
function progress(snapshot){
var percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100;
console.log("percentage" + percentage)
self.progressUpload = percentage;
},
function error(err){
console.log("error")
},
function complete(){
console.log("done")
var downloadURL = task.snapshot.downloadURL;
}
);
});
}
以上是关于如何将多个图像上传到Firebase存储并返回多个downloadURL的主要内容,如果未能解决你的问题,请参考以下文章