electron-vue 文件選擇對話框

1. 導入 Electron dialog 模塊

<script>

const { dialog } = require('electron').remote;
...

</script>

 

2. 在代碼中調用 Electron dialog 模塊，如下所示：

var selectedFilePath = dialog.showOpenDialog(

{
  title: '圖片文件選擇',                          // 對話框的標題
  defaultPath: '',                              // 默認的文件名字
  filters: [
    {
      name: 'img',
      extensions: ['jpg', 'png']                // 只允許 jpg 和 png 格式的文件
    }
  ],
  buttonLabel: '選擇'                           // 自定義按鈕文本顯示內容
});
alert(selectedFilePath);

注：變量 selectedFilePath 即為選中的文件名（含路徑）。

運行效果如下：