Electron上传文件、打开文件夹(主进程、渲染进程)

最新推荐文章于 2025-02-25 13:36:38 发布

蜡笔小新历险记

最新推荐文章于 2025-02-25 13:36:38 发布

阅读量4.2k

点赞数

分类专栏： Electron系列教程文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/muyoufansem/article/details/117361987

版权

Electron系列教程专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在 Electron 应用中正确使用 dialog 模块进行文件选择操作。在主进程中直接导入 dialog，并调用 showOpenDialog 方法。而在渲染进程中，需要通过 electron.remote 访问 dialog。当在 Vue 集成的 Electron 项目中遇到错误时，可以改用回调方式处理结果。官方文档和参考资料提供了更多配置参数和使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主进程（官方示例）：

const { dialog } = require('electron')
console.log(dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] }))

渲染进程：

如果是在渲染进程中使用，可以使用以下方式：

const { dialog } = require('electron').remote
console.log(dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] }))

选择结果（官方示例）：

dialog.showOpenDialog(mainWindow, {
  properties: ['openFile', 'openDirectory']
}).then(result => {
  console.log(result.canceled)
  console.log(result.filePaths)
}).catch(err => {
  console.log(err)
})

在 VUE 集成 Electron 项目上使用此类会报错：dialog.showOpenDialog(...).then is not a function，可使用以下方式：

dialog.showOpenDialog({
  properties: ['openDirectory']
}, (result) => {
  console.log(result);
})

其他配置参数，使用方式可参考：

官方文档：

https://www.electronjs.org/docs/api/dialog

参考资料：

https://www.cnblogs.com/badaoliumangqizhi/p/13028216.html