如何解决多个文件上传后firebase存储执行代码
在所有文件上传到 firebase 存储后,我试图重定向到另一个页面。它在完成上传之前继续执行重定向代码。无法弄清楚如何一个接一个执行。这是一个运行在网站客户端的js脚本。
if (file[0].files[0]) {
uploadFile(file[0]);
}
if (file[1].files[0]) {
uploadFile(file[1]);
}
if (file[2].files[0]) {
uploadFile(file[2]);
}
console.log("All files finished");
window.location.href = "success.html";
function uploadFile(file) {
var task = storage.ref("arts/" + emailValue + Date.Now()).put(file.files[0]);
task.on('state_changed',function progess(snapshot) {
var progressValue = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log(progressValue);
},function error(err) {
console.log(err);
},function completed() {
console.log('file upload success');
task.snapshot.ref.getDownloadURL().then(function(downloadURL) {
imgurl = downloadURL;
storeDetails();
});
}
);
}
function storeDetails() {
db.collection("participants").doc(emailValue + Date.Now()).set({
email: emailValue,url: imgurl.toString(),})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ",error);
})
}
解决方法
put
方法返回一个 promise,因此您可以等待它解决而不是传入回调。这样做时,上传文件并将其下载 URL 存储在数据库中的代码变为:
function uploadFile(file) {
const filename = emailValue + Date.now();
storage.ref("arts/" + filename).put(file.files[0]).then(() => {
task.snapshot.ref.getDownloadURL().then((downloadURL) => {
db.collection("participants").doc(emailfilename).set({
email: emailValue,url: downloadURL.toString()
})
});
}
);
}
注意上面的代码有一些细微的变化,所以:
- 可能有语法错误,因为我没有运行它,所以把它当作伪代码。如果您遇到错误,请先尝试自己解决 - 如果您解决了,请发表评论或编辑答案并修复。
- 如果您还需要进度报告,您可以监听
state_changed
。只需忽略completed
事件,因为它由上面代码中的then()
处理。
从uploadFile 和storeDetail 函数返回一个promise,然后使提交函数异步并等待uploadFile 函数调用完成。
[15,20,25,15,25]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。