10. Electron 选择文件对话框功能的实现
这节开始带大家学习 Electron 下的对话框操作,对话框一般会有选择文件对话框,保存文件对话框和确认对话框,本文我们就来学习文件选择对话框和保存文件对话框的相关操作。
话框相关 API 讲解
我们先来看一下打开对话框的相关 API,打开文件选择对话框可以使用dialog.showOpenDialog()
方法来打开,它有两个参数,一个是设置基本属性,另一个是回调函数,如果是异步可以使用then
来实现。
title
: String (可选),对话框的标题defaultPath
: String (可选),默认打开的路径buttonLabel
: String (可选), 确认按钮的自定义标签,当为空时,将使用默认标签filters
: 文件选择过滤器,定义后可以对文件扩展名进行筛选properties
:打开文件的属性,比如打开文件还是打开文件夹,甚至是隐藏文件。
对基本的 API 了解以后,就可以写代码看看具体的效果了。
选择对话框练习
在根目录新建一个index4.html
文件,然后编写一个按钮,点击按钮可以打开窗口选择文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="openBtn">打开文件</button> <img id="images" style="width: 100%;" /> <script> const {dialog} = require('electron').remote; var openBtn = document.querySelector('#openBtn'); openBtn.onclick = function () { dialog.showOpenDialog({ title: '请选择你喜欢的宠物' }) } </script> </body> </html>
写完后记得把main.js
中的引入页面改成index4.html
代码如下:
mainWindow.loadFile('index4.html');
使用electron .
预览一下,可以看到,已经可以顺利打开文件选择窗口了。
默认路径的设置
这时打开的窗口是没有默认文件的,比如我们想直接定位到美女文件mv.jpg
,就可以用defaultPath
来进行制作。 代码如下:
dialog.showOpenDialog({ title:'请选择你喜欢的宠物照片', defaultPath:'mv.jpg' })
过滤器的使用
现在程序还是可以看到很多其他的文件,我们的原则就是想选择一个美女照片,然后显示在界面上,这时候就需要用到过滤器了。
openBtn.onclick = function(){ dialog.showOpenDialog({ title:'请选择你喜欢的宠物照片', defaultPath:'mv.jpg', filters:[ {name:'jpg',extensions:['jpg']} ] }) }
从上图我们看到此时已经过滤到很多其他的文件。
自定义确定按钮
可以直接使用buttonLabel
来自定义确定按钮的文字,比如现在把文字改成’打开图片’。
dialog.showOpenDialog({ title:'请选择你喜欢的宠物照片', defaultPath:'mv.jpg', filters:[ {name:'jpg',extensions:['jpg']} ], buttonLabel:'打开图片', })
把美女放到应用中
当我们选择到了一个文件后,showOpenDialog()
提供了回调函数,也就是我们的第二个参数。现在来看一下回调函数如何获得图片路径。
const {dialog} = require('electron').remote; var openBtn = document.querySelector('#openBtn'); openBtn.onclick = function () { dialog.showOpenDialog({ title: '请选择你喜欢的宠物照片', defaultPath: 'mv.jpg', filters: [{name:'jpg',extensions:['jpg']}], buttonLabel: '打开图片' }).then(result => { // console.log(result); let image = document.querySelector("#images"); image.setAttribute('src', result.filePaths[0]); }).catch(err => { console.log(err); }) }
这样完成了选择照片,并显示在界面上的功能,
有的小伙伴这时候就会问了,我用 html 的选择文件也可以实现这个效果,确实是可以实现的,但我认为既然用了 Electron 就最好使用原生的形式打开。
码云笔记 » 10. Electron 选择文件对话框功能的实现