10、electron showOpenDialog选择文件

知识点：

dialog.showOpenDialog([browserWindow, ]options[, callback])

  • browserWindow BrowserWindow (可选)
  • options Object
    • title String
    • defaultPath String
    • filters Array
    • properties Array - 包含了对话框的特性值, 可以包含 openFile, openDirectory, multiSelections and createDirectory
  • callback Function (可选)

成功使用这个方法的话，就返回一个可供用户选择的文件路径数组，失败返回 undefined.

filters 当需要限定用户的行为的时候，指定一个文件数组给用户展示或选择. 例如:

{
  filters: [
    { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
    { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
    { name: 'Custom File Type', extensions: ['as'] },
    { name: 'All Files', extensions: ['*'] }
  ]
}

extensions 数组应当只包含扩展名，不应该包含通配符或'.'号 (例如 'png' 正确，但是 '.png' 和 '*.png' 不正确). 展示全部文件的话, 使用 '*' 通配符 (不支持其他通配符).

如果 callback 被调用, 将异步调用 API ，并且结果将用过 callback(filenames) 展示.

注意: 在 Windows 和 Linux ，一个打开的 dialog 不能既是文件选择框又是目录选择框, 所以如果在这些平台上设置 properties 的值为 ['openFile', 'openDirectory'] , 将展示一个目录选择框.

 

实例：

1、新建"选择文件.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>
    <input type="button" id="btn" value="选择图片" />
    <img id="img" />
    <script>
        const remote = require("@electron/remote");   //引入remote模块
        const dialog = remote.dialog;  //选择文件对话框

        let btn = document.getElementById("btn");
        btn.onclick = (e)=>{
            dialog.showOpenDialog({
                title:'请选择图片',   //对话框标题
                defaultPath:'1.jpg',   //设置选择的文件名称
                filters:[    //过滤文件类型
                    { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
                    { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] }
                ]
            }).then(result=>{   //图片选中后将回调此方法
                console.log(result);  //返回的是一个对象
                let img = document.getElementById("img");   
                img.setAttribute("src",result.filePaths[0]);  //展示图片
            }).catch(err=>{
                console.log(err);  //异常处理
            });
        }
    </script>
</body>
</html>

 

2、运行效果：

 

posted @ 2022-12-12 16:23  ziff123  阅读(2257)  评论(0)  编辑  收藏  举报