electron-vue项目踩坑--TypeError : this.$electron.remote.dialog.showOpenDialog (...) .then is not a function ,对话框回调问题

前言

  记录 electron-vue 项目开发中遇到的一个报错,TypeError : this.$electron.remote.dialog.showOpenDialog (...) .then is not a function...学了electron 后,想在项目中使用 dialog.showOpenDialog () 这个API 来实现文件上传功能,遇到了一些版本问题的小 bug ,当然也可以通过前端 html 来实现这个功能,这不是学习了electron 吗,感觉人家提供的方法更值得使用。下面看下报错截图,

 

  这种情况的代码:

       this.$electron.remote.dialog
        .showOpenDialog({
          properties: ["openFile", "openDirectory"],
        })
        .then((result) => {
          console.log(result);
        })
        .catch((err) => {
          console.log(err);
        });

  上面的代码是直接触发的事件逻辑,项目是electron-vue脚手架生成的,默认electron挂载在了vue原型上,直接通过 this.$electron 可以调用主进程中 electron 对象,报错提示说showOpenDialog 这个方法的回调不是一个function ,我这是用的官网的例子,出现了这个问题,自己也是反复调试了半天,最终无奈,发现自己版本是 6.0.1 ,官方文档的是 12.0.4,然后查资料发现了这里回调的一个问题,最新版本的把回调封装成了 promise 对象的回调,老版本的回调当作参数传递进去。然后解决了这个问题,然后根据我的版本修改了代码,如下:

        this.$electron.remote.dialog
        .showOpenDialog({
          properties: ["openFile", "openDirectory"],
        },(result) => {
          console.log(result);
        })    

   运行结果如下:

总结

  electron 中使用 dialog 对象来打开对话框,可用打开保存文件或者警告弹框提示等,该对象用于主进程中,如果要在渲染进程中使用需要 const {dialog} = require("electron).remote ,当使用 dialog.showOpenDialog() 这个方法时候需要注意版本中处理回调的问题,然后还要注意回调参数 result 是一个数组,将选择的文件的 path 绝对路径放在里面,同时可以通过node 中path模块来处理这个路径,得到具体文件名。

  以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。

posted @ 2021-04-23 17:46  丶Serendipity丶  阅读(204)  评论(0编辑  收藏  举报