electron-上传文件、保存文件

1.showOpenDialog

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Demo</title>
</head>

<body>
    <h1>Hello demo</h1>
    <button id="btn">打开子窗口</button>
    <a id="go_a" href="https://www.cnblogs.com/fwjlucifinil/p/13535393.html">luc</a>
    <div id="son_call"></div>
    <button id="upload">12312</button>
    <img id="img_xjj" style=" 100%;">
</body>
<script src="render/index.js"></script>
<script>
    const { dialog } = require('electron').remote
    // 打开文件选择对话框可以使用dialog.showOpenDialog()方法来打开，它有两个参数，一个是设置基本属性，另一个是回调函数，如果是异步可以使用then来实现。
    // showOpenDialog异步  showOpenDialogSync  同步
    // title ： String (可选)，对话框的标题
    // defaultPath ： String (可选),默认打开的路径,默认文件名
    // buttonLabel ： String (可选), 确认按钮的自定义标签，当为空时，将使用默认标签
    // filters ： 文件选择过滤器，定义后可以对文件扩展名进行筛选
    // properties：打开文件的属性，比如打开文件还是打开文件夹，甚至是隐藏文件。
    var upload = this.document.getElementById('upload')
    upload.onclick = function () {
        dialog.showOpenDialog({
            title: '天下的一切都是本王所有',
            defaultPath: 'd:1',
            filters: [{
                name: 'jpg',
                extensions: ['jpg', 'png']
            }],
            buttonLabel: '开启新世界大门!'
        }).then(result => {
            let image = document.getElementById('img_xjj')
            console.log(result)
            image.setAttribute("src", result.filePaths[0])
        }).catch(err=>{
            console.log(err)
        })
    }
</script>

</html>

2.showSaveDialog

<!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>
    <h2>弹出子窗口</h2>
    <button id="son_btn">向父窗口传递信息</button>
    <button id="upload_file">上传文件</button>
    <button id="save_file">保存文件</button>
</body>
<script>
    var pop_btn = this.document.getElementById("son_btn")
    pop_btn.onclick = function(e){
        //window.opener表示当前窗口的父窗口
        //
        alert("发送")
        window.opener.postMessage('I`m Lucifinil_popup')
    }

    const { dialog } = require('electron').remote
    var upload_file = this.document.getElementById('upload_file')
    upload_file.onclick = function () {
        dialog.showOpenDialog({
            title:'天下的一切都是本王所有',
            defaultPath:"xiao.jpg"
        })
    }

    const fs = require('fs')
    var save_file = this.document.getElementById('save_file')
    save_file.onclick = function(){
        dialog.showSaveDialog({
            title:'保存文件'
        }).then(result=>{
            window.opener.postMessage(result)
            console.log(result)
            fs.writeFileSync(result.filePath,'啊哈哈哈')
        }).catch(err=>{
            console.log()
        })
    }

</script>
</html>