Electron选择⽂件、⽂件夹对话框
1.第⼀种⽅法，纯js代码
其原理是：利⽤input标签的file类别，打开选择⽂件对话框通过input标签的change事件，将选择的⽂件返回。为了使每次选择的⽂件都得到更新，在input对象⽤完后每次都移除出html中，下次使⽤时再重新创建并添加到html中。代码如下：
/**
*按钮事件实现函数
*原理：利⽤input标签的file类别，打开选择⽂件对话框
*通过change事件，将选择的⽂件返回。为了使每次选择的⽂件都得到更新，
*在input对象⽤完后每次都移除出html中，下次使⽤时再重新创建并添加到html中
*/
btnClickFun:function(dir){
// 创建input标签
var ateElement('input')
// 设置属性
inputObj.setAttribute('id','_ef');
inputObj.setAttribute('type','file');
inputObj.setAttribute("style",'visibility:hidden');
if(dir){ // 如果要选择路径，则添加以下两个属性
inputObj.setAttribute('webkitdirectory', "");
inputObj.setAttribute('directory', "");
}
// 添加到DOM中
document.body.appendChild(inputObj);
// 添加事件
inputObj.addEventListener("change",this.updatePath);
// 模拟点击
inputObj.click();
},
// 打开⽂件选择器input标签的change事件响应
updatePath:function(){
var inputObj = ElementById("_ef");            var files = inputObj.files;
console.log(files)
try{
if(files.length > 1){
alert('当前仅⽀持选择⼀个⽂件')
}
else{
switch(this.btntype){
case 'store':
// 临时变量的值赋给输出路径
this.outpath = files[0].path;
break;
case 'add':
// 添加⽂件操作
this.filepath = files[0].path;
if(this.addFile(this.filepath)){
alert("添加成功")
}
break;
default:
break;
}
}
// 移除事件
/
/ 从DOM中移除input
veChild(inputObj);
}catch (error) {
alert(error)
}
},
btnClickFun函数中创建并设置了input标签属性及，函数updatePath为change事件监听的回调函数。通过input标签对象的files属性获得选中的⽂件名。
2.第⼆种⽅法，electron
⾸先在⼦进程中引⼊ipcRenderer模块，
import {ipcRenderer} from 'electron'
利⽤该模块向主进程发送“open-directory-dialog”消息，配置参数为“openDirectory”或“openFile”，并且设置主进程返回的消
息“selectedItem”的回调函数为getPath，
// 按钮点击事件
btnClick:function(type){
this.btntype = type;
// 判断点击事件是哪个按钮发出的
switch(type){
case 'store':
// 选择存贮路径
//
this.btnClickFun(true);
ipcRenderer.send('open-directory-dialog','openDirectory');                    ('selectedItem',Path);
break;
case 'add':
// 添加⽂件
//
this.btnClickFun(false);
ipcRenderer.send('open-directory-dialog','openFile');
<('selectedItem',Path);
break;
case 'remove':
this.deleteItem();
break;
case 'pack':
break;
default:
break;
}
},
getPath:function(e,path){
console.log(path)
if(path == null){
alert('请选择⼀个⽂件/⽂件夹')
}
else{
switch(this.btntype){
case 'store':
// 临时变量的值赋给输出路径
this.outpath = path;
break;
case 'add':
// 添加⽂件操作
this.filepath = path;
if(this.addFile(this.filepath)){
alert("添加成功")
}
break;
default:
break;
}
}
electron vue教程},
然后在主进程中设置好⼦进程的消息监听，并且引⼊dialog模块import { dialog } from 'electron'
// 绑定打开对话框事件
<('open-directory-dialog', function (event,p) {  dialog.showOpenDialog({
properties: [p]
},function (files) {
if (files){// 如果有选中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。