Javascript-在文件上载期间防止导航

我有一个用于视频上载的vue组件，当用户在视频上载过程中尝试导航时，我警告用户，如果他这样做，将丢失文件，如下所示：

       ready() {
            window.onbeforeunload = () => {
                if (this.uploading && !this.uploadingComplete && !this.failed) {
                    this.confirm('Are you sure you want to navigate away? Your video won't be uploaded if you do so!');
                }
            }
        }

我正在使用sweetalert来提醒用户。但我如何才能让它保持在同一页上，并在他确认要导航离开之前阻止导航离开

这是整个组件：

<script>
    function initialState (){
        return {
            uid: null,
            uploading: false,
            uploadingComplete: false,
            failed: false,
            title: null,
            link: null,
            description: null,
            visibility: 'private',
            saveStatus: null,
            fileProgress: 0
        }
    }
    export default {
        data: function (){
            return initialState();
        },
        methods: {
            fileInputChange() {
                this.uploading = true;
                this.failed = false;

                this.file = document.getElementById('video').files[0];

                this.store().then(() => {
                    var form = new FormData();

                    form.append('video', this.file);
                    form.append('uid', this.uid);

                    this.$http.post('/upload', form, {
                        progress: (e) => {
                            if (e.lengthComputable) {
                                this.updateProgress(e)
                            }
                        }
                    }).then(() => {
                        this.uploadingComplete = true
                    }, () => {
                        this.failed = true
                    });
                }, () => {
                    this.failed = true
                })
            },
            store() {
                return this.$http.post('/videos', {
                    title: this.title,
                    description: this.description,
                    visibility: this.visibility,
                    extension: this.file.name.split('.').pop()
                }).then((response) => {
                    this.uid = response.json().data.uid;
                });
            },
            update() {
                this.saveStatus = 'Saving changes.';

                return this.$http.put('/videos/' + this.uid, {
                    link: this.link,
                    title: this.title,
                    description: this.description,
                    visibility: this.visibility
                }).then((response) => {
                    this.saveStatus = 'Changes saved.';

                    setTimeout(() => {
                        this.saveStatus = null
                    }, 3000)
                }, () => {
                    this.saveStatus = 'Failed to save changes.';
                });
            },
            updateProgress(e) {
                e.percent = (e.loaded / e.total) * 100;
                this.fileProgress = e.percent;
            },
            confirm(message) {
              swal({
                title: message,
                text: null,
                type: "warning",
                showCancelButton: true,
                cancelButtonText: "Cancel",
                cancelButtonColor: '#FFF',
                confirmButtonColor: "#2E112D",
                confirmButtonText: "Yes, delete"
              }).then(function(){
                  this.$data = initialState();
              }.bind(this), function(dismiss) {
                // dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
                if (dismiss === 'cancel') { // you might also handle 'close' or 'timer' if you used those
                // ignore
                } else {
                  throw dismiss;
                }
              })
            }
        },
        ready() {
            window.onbeforeunload = () => {
                if (this.uploading && !this.uploadingComplete && !this.failed) {
                    this.confirm('Are you sure you want to navigate away? Your video won't be uploaded if you do so!');
                }
            }
        }
    }
</script>

函数初始状态（）{
返回{
uid:null，
上传：错，
上载完成：false，
失败：false，
标题：空，
链接：空，
description:null，
可见性：“私有”，
saveStatus:null，
文件进度：0
}
}
导出默认值{
数据：函数（）{
返回initialState（）；
},
方法：{
fileInputChange（）{
this.upload=true；
this.failed=false；
this.file=document.getElementById（'video'）。文件[0]；
this.store（）。然后（（）=>{
var form=new FormData（）；
form.append（'video'，this.file）；
form.append（'uid'，this.uid）；
这是.http.post（'/upload'，表单{
进展：（e）=>{
if（如长度可计算）{
this.updateProgress（e）
}
}
}).然后（（）=>{
this.uploadingComplete=true
}, () => {
this.failed=true
});
}, () => {
this.failed=true
})
},
存储（）{
返回此。$http.post（“/videos”{
标题：这个，
description:this.description，
能见度：这个，
扩展名：this.file.name.split（'.'）.pop（）
})。然后（（响应）=>{
this.uid=response.json（）.data.uid；
});
},
更新（）{
this.saveStatus='保存更改'；
返回此。$http.put（'/videos/'+this.uid{
link:this.link，
标题：这个，
description:this.description，
可见度：这是可见度
})。然后（（响应）=>{
this.saveStatus='已保存的更改'；
设置超时（（）=>{
this.saveStatus=null
}, 3000)
}, () => {
this.saveStatus='未能保存更改'；
});
},
updateProgress（e）{
e、 百分比=（e.loaded/e.total）*100；
this.fileProgress=e.percent；
},
确认（消息）{
游泳({
标题：信息，
文本：空，
键入：“警告”，
showCancelButton:true，
cancelButtonText：“取消”，
cancelButtonColor:“#FFF”，
confirmButtonColor:“2E112D”，
confirmButtonText：“是，删除”
}).然后（函数（）{
这是。$data=initialState（）；
}.bind（此）、函数（解除）{
//解除可以是“覆盖”、“取消”、“关闭”、“esc”、“计时器”
如果（dismise==='cancel'）{//如果您使用了“close”或“timer”，那么还可以处理它们
//忽略
}否则{
扔弃；
}
})
}
},
就绪（）{
window.onbeforeunload=（）=>{
if（this.upload&&！this.uploadingComplete&&！this.failed）{
this.confirm（'您确定要导航到别处吗？如果您这样做，您的视频将不会上载！'）；
}
}
}
}

Mozilla文档建议

window.onbeforeunload = function(e) {
  var dialogText = 'Dialog text here';
  e.returnValue = dialogText;
  return dialogText;
};

并声明：

自2011年5月25日起，HTML5规范规定，在此事件期间可能会忽略对window.alert（）、window.confirm（）和window.prompt（）方法的调用。有关更多详细信息，请参阅HTML5规范

包含许多其他有关原因的详细信息，以及现代浏览器的预期内容

似乎是你的复制品

建议，为了避免奇怪的浏览器行为，您应该仅在要防止某些事情发生时设置处理程序（也就是说，当导航离开时，应该触发确认对话框）

但我如何才能让它保持在同一页上，并在他确认要导航离开之前阻止导航离开

添加

返回false

以停止事件

if (this.uploading && !this.uploadingComplete && !this.failed) {
      this.confirm("Are you sure you want to navigate away? Your video won't be uploaded if you do so!");
    return false;  // <==== add this
}

if（this.uploading&&！this.uploadingComplete&&！this.failed）{
确认（“你确定要离开吗？如果你这样做，你的视频将不会上传！”）；
return false；//这也将停止sweetalert插件的执行，并显示默认的浏览器警报。