我如何等待 uploadTask 以便在将下载 url 和文档插入到 firestore 之前先上传图像/文件并跟踪其进度,
以下代码是我的示例 Vue 项目。它工作正常,但请参阅if (portraitFile)
,必须满足我必须上传图片的条件,如果我不想上传图片怎么办?
它必须移出该条件if
,但它将在文件完成并检索下载 URL 之前异步执行。
目标:将 firestore add() 移到 uploadTask 的完成回调/参数之外。
async commitCharacter() {
try {
let character = this.character;
let portraitFile = this.portraitFile;
if (portraitFile) {
const uploadTask = storageRef
.child(`characters/${character.id}/portrait.png`)
.put(portraitFile, { contentType: "image/png" });
await uploadTask.on(
"state_changed",
snapshot => {
this.portraitUploadProgress =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
},
null,
async () => {
character.portraitUrl = await storageRef
.child(`characters/${character.id}/portrait.png`)
.getDownloadURL();
if (character.id) {
await db
.collection("characters")
.doc(character.id)
.update(character);
} else {
character.id = (await
db.collection("characters").add(character)).id;
}
$("#manageCharacter").modal("hide");
}
);
}
}
你可以把你的uploadTask
承诺:
async function uploadTaskPromise() {
return new Promise(function(resolve, reject) {
const storageRef = storage.ref(YOUR_STORAGE_PATH)
const uploadTask = storageRef.put(YOUR_FILE_OR_BLOB)
uploadTask.on('state_changed',
function(snapshot) {
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
console.log('Upload is ' + progress + '% done')
},
function error(err) {
console.log('error', err)
reject()
},
function complete() {
uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
resolve(downloadURL)
})
}
)
})
}
然后像这样使用它:
const storageUrl = await uploadTaskPromise()
console.log(storageUrl) // do whatever you want with the URL...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)