firebase - 如何将多个图像上传到 Firebase 存储并返回多个下载 URL
问题描述
我们正在开发一个简单的电子商务应用程序,我们需要在其中上传多个产品图片。使用 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;
}
);
});
}
推荐阅读
- python - 将 Dataframe 中的列转换为 Int
- airflow - 在 Apache Airflow 2.0 TaskFlow DAG 中使用 PythonVirtualenvOperator
- flutter - InitState - 函数未在 Flutter 上执行
- functional-programming - 是否可以在 Ocaml 中实现罗素悖论?
- google-play - PlayStore 已删除应用程序:让所有用户卸载它
- javascript - 为什么我得到的结果是无序列表而不是有序列表?
- javascript - Angular:无法为多个表单重用相同的组件
- amazon-web-services - 我可以将现有的 Aurora 数据库集群迁移到 Aurora Serverless 吗?
- sql - First 和 Last 合并窗口函数
- python - 运行任意代码作为函数参数(类似于 lambda)