Electron选择文件、文件夹对话框(非原创，传播)

文章转载自：https://www.jianshu.com/p/e71...，感谢文章做者，成功完成选择文件夹 的功能

1.第一种方法，纯js代码
其原理是：利用input标签的file类别，打开选择文件对话框经过input标签的change事件，将选择的文件返回。为了使每次选择的文件都获得更新，在input对象用完后每次都移除出html中，下次使用时再从新建立并添加到html中。代码以下：
/**
         *按钮事件实现函数
         *原理：利用input标签的file类别，打开选择文件对话框
         *经过change事件，将选择的文件返回。为了使每次选择的文件都获得更新，
         *在input对象用完后每次都移除出html中，下次使用时再从新建立并添加到html中
         */
        btnClickFun:function(dir){
            // 建立input标签
            var inputObj=document.createElement('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 = document.getElementById("_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;
                    }
                }
                // 移除事件监听器
                inputObj.removeEventListener("change",function(){});
                // 从DOM中移除input
                document.body.removeChild(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');
                    ipcRenderer.on('selectedItem',this.getPath);
                    break;
                case 'add':
                // 添加文件
                    //
this.btnClickFun(false);
                    ipcRenderer.send('open-directory-dialog','openFile');
                    ipcRenderer.on('selectedItem',this.getPath);
                    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;
                }
            }
        },
而后在主进程中设置好子进程的消息监听，而且引入dialog模块import { dialog } from 'electron'
// 绑定打开对话框事件
ipcMain.on('open-directory-dialog', function (event,p) {
  dialog.showOpenDialog({
    properties: [p]
  },function (files) {
      if (files){// 若是有选中
        // 发送选择的对象给子进程
        event.sender.send('selectedItem', files[0])
      }
  })
});
这样就能够完成选择文件/文件夹的操做了。3.第一种方法实现的vue组件纯JS实现的文件选择器，须要操做DOM原理：利用input标签的file类别，打开选择文件对话框经过change事件，将选择的文件返回。为了使每次选择的文件都获得更新，在input对象用完后每次都移除出html中，下次使用时再从新建立并添加到html中默认打开文件夹，若是须要选择文件，则须要在调用处配置属性dir='file'属性caption显示按钮的文本信息成功调用后会向父进程发送一个‘btnSelectItem’消息用于返回选中的文件全路径

这其中参考了vue官方文档《将原生事件绑定到组件》章节，解决父组件调用时子组件按钮不响应的问题。将原生事件绑定到组件
你可能有不少次想要在一个组件的根元素上直接监听一个原生事件。这时，你能够使用v-on 的 .native 修饰符：

在有的时候这是颇有用的，不过在你尝试监听一个相似  的很是特定的元素时，这并非个好主意。好比上述  组件可能作了以下重构，因此根元素其实是一个  元素：

  {{ label }}

这时，父级的 .native 监听器将静默失败。它不会产生任何报错，可是 onFocus 处理函数不会如你预期地被调用。
为了解决这个问题，Vue 提供了一个 $listeners 属性，它是一个对象，里面包含了做用在这个组件上的全部监听器。例如：
{
  focus:
function (event) { / ... / }
  input:
function (value) { / ... / },
}
有了这个 $listeners 属性，你就能够配合 v-on="$listeners" 将全部的事件监听器指向这个组件的某个特定的子元素。对于相似  的你但愿它也能够配合 v-model 工做的组件来讲，为这些监听器建立一个相似下述 inputListeners 的计算属性一般是很是有用的：
Vue.component('base-input', {
  inheritAttrs:
false,
  props: [
'label', 'value'],
  computed: {
    inputListeners:
function () {

var vm = this

// Object.assign 将全部的对象合并为一个新对象

return Object.assign({},

// 咱们从父级添加全部的监听器

this.$listeners,

// 而后咱们添加自定义监听器，

// 或覆写一些监听器的行为
        {

// 这里确保组件配合 v-model 的工做
          input:
function (event) {
            vm.$emit(
'input', event.target.value)
          }
        }
      )
    }
  },
  template:
          {{ label }}           
})
如今  组件是一个彻底透明的包裹器了，也就是说它能够彻底像一个普通的 元素同样使用了：全部跟它相同的特性和监听器的均可以工做。

4.第二种方法实现的vue组件Electron的ipcRenderer模块实现的选择文件器默认打开文件夹，若是须要选择文件，则须要在调用处配置属性dir='file'属性caption显示按钮的文本信息成功调用后会向父进程发送一个‘btnSelectItem’消息用于返回选中的文件全路径