javascript - Firebase图像以异步等待方式上传
问题描述
async UPLOAD_IMAGES() {
try {
let self = this;
var storageRef = firebase.storage().ref();
var files = document.getElementById("photoupload").files;
var file = files[0];
// Create the file metadata
var metadata = {
contentType: "image/jpeg"
};
// Upload file and metadata to the object 'images/mountains.jpg'
var uploadTask = storageRef
.child(`${this.name}/` + file.name)
.put(file, metadata);
// Listen for state changes, errors, and completion of the upload.
uploadTask.on(
firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
function(snapshot) {
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
var progress =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log("Upload is " + progress + "% done");
switch (snapshot.state) {
case firebase.storage.TaskState.PAUSED: // or 'paused'
console.log("Upload is paused");
break;
case firebase.storage.TaskState.RUNNING: // or 'running'
console.log("Upload is running");
break;
}
},
function(error) {
// A full list of error codes is available at
// https://firebase.google.com/docs/storage/web/handle-errors
switch (error.code) {
case "storage/unauthorized":
// User doesn't have permission to access the object
break;
case "storage/canceled":
// User canceled the upload
break;
case "storage/unknown":
// Unknown error occurred, inspect error.serverResponse
break;
}
},
function() {
// Upload completed successfully, now we can get the download URL
uploadTask.snapshot.ref
.getDownloadURL()
.then(function(downloadURL) {
console.log("File available at", downloadURL);
self = downloadURL;
});
}
);
} catch (error) {
console.log("ERR ===", error);
alert("Image uploading failed!");
}
}
这是我上传图片的全部功能。我唯一的问题是它在这个函数中有回调函数。
function() {
// Upload completed successfully, now we can get the download URL
uploadTask.snapshot.ref
.getDownloadURL()
.then(function(downloadURL) {
console.log("File available at", downloadURL);
self = downloadURL;
});
}
只有这部分我可以获得异步等待功能吗?
解决方案
您可以很好地调用then()
,UploadTask
如下所述:https ://firebase.google.com/docs/reference/js/firebase.storage.UploadTask#then
此对象的行为类似于 Promise,并在上传完成时使用其快照数据进行解析。
因此,您可以执行以下操作:
async UPLOAD_IMAGES() {
try {
let self = this;
const storageRef = firebase.storage().ref();
const files = document.getElementById("photoupload").files;
const file = files[0];
// Create the file metadata
const metadata = {
contentType: "image/jpeg"
};
const fileRef = storageRef
.child(`${this.name}/` + file.name);
const uploadTaskSnapshot = await fileRef.put(file, metadata);
const downloadURL = await uploadTaskSnapshot.ref.getDownloadURL();
self = downloadURL;
} catch (error) {
console.log("ERR ===", error);
alert("Image uploading failed!");
}
}
推荐阅读
- java - 如何在周末重置 Arraylist?
- numpy - 在 Linux 中安装 python 模块时出错
- node.js - Ansible Tower 中使用 API 端点的作业模板
- javascript - 如何使元素在整个 href 卡中不能用作 href
- git - 如何使用终端在 git 中正确地变基和推送
- python - Wagtail:菜单项在新窗口中打开,但将主域附加到外部 url?
- excel - 显示独特细胞的功能
- flutter - 为什么我不能滚动列表视图?我收到典型错误“A RenderFlex 在底部被 xx 像素溢出”
- javascript - Firebase Firestore 适用于真实数据库,但不适用于模拟器
- go - 如何在方法中包装 http.Handler