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模塊來處理這個路徑，得到具體文件名。

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。