有兩種方式：

方式一：[Vue的實現(xiàn)方案]

思路： 借助input[type="file"]標(biāo)簽，在頁面中將其隱藏， 然后使用js進行手動觸發(fā)，缺點：文件夾和文件多選不同同時存在。

示例代碼：

<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的實現(xiàn)方案】

思路：使用Electron提供的API實現(xiàn)，注意：以下示例運行的環(huán)境是electron@15.2.0，其他版本不能保證是否能正常運行。

示例代碼;

ipcRender進程：

electron.ipcRender.invoke('key', params).then(result => {
    // result 為選擇后的結(jié)果
    console.log(result);
})

ipcMain進程：
ipcMain.handle('key', async (event, params) => {
    const result = electron.dialog.showOpenDialog({
      title: 'Download',
      properties: ['openDirectory']
  })
  // 返回選擇的結(jié)果
  return result
})

上述API參考文檔