当前位置：文江博客文章教程详情

Electron 选择文件对话框

发布于 2021-06-11 13:24:36 字数 3271 浏览 1677 评论 0

对话框一般会有选择文件对话框，保存文件对话框和确认对话框。

一、对话框相关 API 讲解

我们先来看一下打开对话框的相关 API，打开文件选择对话框可以使用 dialog.showOpenDialog() 方法来打开，它有两个参数，一个是设置基本属性，另一个是回调函数，如果是异步可以使用 then 来实现。

title ： String (可选)，对话框的标题
defaultPath ： String (可选),默认打开的路径
buttonLabel ： String (可选), 确认按钮的自定义标签，当为空时，将使用默认标签
filters ：文件选择过滤器，定义后可以对文件扩展名进行筛选
properties：打开文件的属性，比如打开文件还是打开文件夹，甚至是隐藏文件。

对基本的 API 了解以后，就可以写代码看看具体的效果了。

二、选择对话框练习

在根目录新建一个 demo4.html 文件，然后编写一个按钮，点击按钮可以打开窗口选择文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>打开文件</button>
</body>

<script>
    const {dialog} = require('electron').remote
    var openBtn = document.getElementById('openBtn');
    openBtn.onclick = function(){
        dialog.showOpenDialog({
            title:'请选择你喜欢的小姐姐照片'
        })
    }

</script>

</html>

写完后记得把 main.js 中的引入页面改成 demo4.html 代码如下：

mainWindow.loadFile("demo4.html");

使用 electron . 预览一下，可以看到，已经可以顺利打开文件选择窗口了。

三、默认路径的设置

这时打开的窗口是没有默认文件的，比如我们想直接定位到小姐姐文件 xiaojiejie.jpg，就可以用 defaultPath 来进行制作。代码如下：

dialog.showOpenDialog({
    title:'请选择你喜欢的小姐姐照片',
    defaultPath:'xiaojiejie.jpg'
})

四、过滤器的使用

现在程序还是可以看到很多其他的文件，我们的原则就是想选择一个美女照片，然后显示在界面上，这时候就需要用到过滤器了。

openBtn.onclick = function(){
    dialog.showOpenDialog({
        title:'请选择你喜欢的小姐姐照片',
        defaultPath:'xiaojiejie.jpg',
        filters:[
            {name:'jpg',extensions:['jpg']}
        ]
    })
}

五、自定义确定按钮

可以直接使用 buttonLabel 来自定义确定按钮的文字，比如现在把文字改成 打开图片

dialog.showOpenDialog({
    title:'请选择你喜欢的小姐姐照片',
    defaultPath:'xiaojiejie.jpg',
    buttonLabel:'打开图片',
    filters:[
        {name:'jpg',extensions:['jpg']}
    ]
})

六、放到应用中

当我们选择到了一个文件后，showOpenDialog 提供了回调函数，也就是我们的第二个参数。现在来看一下回调函数如何获得图片路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>打开文件</button>
    <img  style="width:100%" />
</body>

<script>
    const {dialog} = require('electron').remote
    var openBtn = document.getElementById('openBtn');
    openBtn.onclick = function(){
        dialog.showOpenDialog({
            title:'请选择你喜欢的小姐姐照片',
            defaultPath:'xiaojiejie.jpg',
            filters:[{name:'jpg',extensions:['jpg']}]
        }).then(result=>{
            let image = document.getElementById('images')
            image.setAttribute("src",result.filePaths[0]);
            console.log(result)
        }).catch(err=>{
            console.log(err)
        })
    }

</script>

</html>

这样完成了选择照片，并显示在界面上的功能，有的小伙伴这时候就会问了，我用 html 的选择文件也可以实现这个效果，确实是可以实现的，但我认为既然用了 Electron 就最好使用原生的形式打开。

分享到QQ

分享到微博