在图像推送到 Firebase 存储之前重新加载页面答案

【问题标题】：Page reloaded before images are pushing on firebase storage在图像推送到 Firebase 存储之前重新加载页面
【发布时间】：2020-09-25 05:11:14
【问题描述】：

在将一些数据推送到 firebase 数据库后，我将图像推送到 firebase 存储，但问题是在图像发布到 firebase 存储之前页面重新加载。

function submitObject() {
    if (v.form()) {
        $('.loading').css('display','block');
        for (var image of this.Images) {
            this.imagesNames.push(image.name);
        }
        const database = firebase.database();
        database.ref('/posts').push({
            description: this.description,
            Images: this.imagesNames,
            createdAt: new Date().getTime(),
            updatedAt: '',
            dateLost: new Date(this.dateLost).getTime(),
            objectName: this.objectName,
            placeLost: this.placeLost,
            firstName: this.firstName,
            lastName: this.lastName,
            numberContact: this.phoneNumber,
            emailContact: this.email,
            postType: this.typeLost,
            uid: firebase.auth().currentUser.uid
        }).then(data => {
                for (var image of this.Images) {
                    uploadImages(image, data.key);
                }
        }).catch(function(error) {
            alert('Oops! Is your server disconnected?')
        }).finally(function (e) {
                $('.loading').css('display','none');
                window.location.reload()
        })
    }
}

uploadImages = async (image, idPost) => {
    var path = (window.URL || window.webkitURL).createObjectURL(image);
    const response = await fetch(path);
    const blob = await response.blob();

    var ref = firebase.storage().ref().child("images/"+firebase.auth().currentUser.uid+"/"+idPost+"/"+image.name);
    return ref.put(blob);
};

【问题讨论】：

标签： javascript jquery firebase firebase-storage

【解决方案1】：

您不会从实际上传数据的 then() 返回任何内容，这意味着 finally 在任何上传完成之前运行。

幸运的是，您的 uploadImages 函数返回 put 返回的 UploadTask 和 UploadTask behaves like a promise。所以你可以这样做：

    ...
}).then(data => {
    let uploads = this.Images.map(uploadImages(image, data.key));
    return Promise.all(uploads);
}).catch(function(error) {
    ...

【讨论】：