Electron创建文件选择Dialog

有两种方式：

方式一：[Vue的实现方案]

思路： 借助input[type="file"]标签，在页面中将其隐藏， 然后使用js进行手动触发，缺点：文件夹和文件多选不同同时存在。

示例代码：

<template>
  <Button @click="addUploadFile">上传</Button>
      <input ref="fileRef" type="file" v-show="false" multiple="multiple"
            @change="fileChange" />
</template>
// 文件夹使用： `webkitdirectory directory`属性

<script>
const addUploadFile = () => {
  fileRef.value.dispatchEvent(new MouseEvent('click')); // fileRef是Vue3的写法
}
const fileChange = (e) => {
      const file = e.target.files[0]
      console.log(file)
 }
</script>

方式二： 【Electron的实现方案】

思路：使用Electron提供的API实现，注意：以下示例运行的环境是electron@15.2.0，其他版本不能保证是否能正常运行。

示例代码;

ipcRender进程：

electron.ipcRender.invoke('key', params).then(result => {
    // result 为选择后的结果
    console.log(result);
})

ipcMain进程：
ipcMain.handle('key', async (event, params) => {
    const result = electron.dialog.showOpenDialog({
      title: 'Download',
      properties: ['openDirectory']
  })
  // 返回选择的结果
  return result
})

上述API参考文档