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 即为选中的文件名（含路径）。

运行效果如下：