码云 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 选择文件对话框功能的实现的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 10. Electron 选择文件对话框功能的实现
