blocks|key|916587|text|您可以使用Node的path.relative。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|916588|entityMap|0|LINK|mutability|MUTABLE|url|https://nodejs.org/dist/latest-v5.x/docs/api/path.html#path_path_relative_from_to^0|A|D|A|D|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

You would use Node's <a href="https://nodejs.org/dist/latest-v5.x/docs/api/path.html#path_path_relative_from_to" rel="nofollow"><code>path.relative</code></a> for that.

blocks|key|916615|text|正如@phuongle在评论中指出的那样，您希望使用showOpenDialog()。就像这样：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|916616|var+remote+=+require('remote');
var+dialog+=+remote.require('electron').dialog;

var+path+=+dialog.showOpenDialog({
++++properties:+['openDirectory']
});|code-block|syntax|javascript|916617|更新:如果以上内容不适用于您当前的电子版本，您应该尝试更现代的导入：|916618|const+{dialog}+=+require('electron').remote;|916619|此外，为了使用remote，在主进程中创建窗口时需要设置enableRemoteModule：|916620|const+myWindow+=+new+BrowserWindow({
++++webPreferences:+{
++++++++enableRemoteModule:+true
++++}
});|916621|entityMap^0|Q|G|0|0|0|0|7|6|S|I|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|T|$]]

As @phuongle pointed out in the comments you want to use <code>showOpenDialog()</code>. Something like this:
<pre><code>var remote = require('remote');
var dialog = remote.require('electron').dialog;

var path = dialog.showOpenDialog({
 properties: ['openDirectory']
});
</code></pre>
UPDATE: If the above isn't working for your current Electron version, you should try more modern importing:
<pre><code>const {dialog} = require('electron').remote;
</code></pre>
In addition, in order to use <code>remote</code>, you need to set <code>enableRemoteModule</code> when creating your window in your main process:
<pre><code>const myWindow = new BrowserWindow({
 webPreferences: {
 enableRemoteModule: true
 }
});
</code></pre>

blocks|key|159887|text|在电子系统中，我们可以通过使用type="file“和webkit目录属性指定简单的输入元素来选择目录。<input+id="myFile"+type="file"+webkitdirectory+/>和我们可以使用File+document.getElementById("myFile").files[0].path的path属性获得目录完整路径|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|159888|entityMap^0|1G|1D|35|1B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

In Electron we can select the directory by specifying simple input element with type="file" and webkitdirectory attribute'. 
 <code>&lt;input id="myFile" type="file" webkitdirectory /&gt;</code> and we can get the directory full path with the path property of File object <code>document.getElementById("myFile").files[0].path</code>

blocks|key|487905|text|我的解决方案是简单地使用all小写，在react组件中使用一个值true作为字符串。不需要额外的配置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|487906|就像这样：|487907|<input
++++id="path-picker"
++++type="file"
++++webkitdirectory="true"
/>|code-block|syntax|javascript|487908|编辑|BOLD|487909|原来，正如@cbarton多克所提到的，它将递归地查找目录中的文件，这是不好的！|487910|最后我使用了所需的电子遥控器的对话框。|487911|entityMap^0|W|4|0|0|0|0|2|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|10|8|@$9|11|A|12|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|13|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|14|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|U|$]]

The solution for me was simply using all in lowercase, with a value <code>true</code> as string in my react component. No extra configuration was required.

Like so:

<pre><code>&lt;input
 id="path-picker"
 type="file"
 webkitdirectory="true"
/&gt;
</code></pre>

Edit

It turns out that, as mentioned by @cbartondock, it will recursively look for files in the directory, which is not good!

I ended up using the required electron remote's dialog.

blocks|key|487932|text|跟随官方的IPC教程为我工作|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|487933|主要进程：|style|BOLD|487934|import+{dialog,+ipcMain}+from+'electron'
function+createWindow+()+{
++mainWindow+=+new+BrowserWindow({/*Your+electron+window+boilerplate*/})
++ipcMain.handle('dialog:openDirectory',+async+()+=>+{
++++const+{+canceled,+filePaths+}+=+await+dialog.showOpenDialog(mainWindow,+{
++++++properties:+['openDirectory']
++++})
++++if+(canceled)+{
++++++return
++++}+else+{
++++++return+filePaths[0]
++++}
++})
}|code-block|syntax|javascript|487935|预加载脚本：|487936|import+{contextBridge,+ipcRenderer}+from+'electron'

contextBridge.exposeInMainWorld('myAPI',+{
++selectFolder:+()+=>+ipcRenderer.invoke('dialog:openDirectory')
})|487937|现在您可以从应用程序代码中调用selectFolder方法并获取用户输入.|487938|window.myAPI.selectFolder().then(result=>{/*+Do+something+with+the+folder+path*/})|487939|entityMap|0|LINK|mutability|MUTABLE|url|https://www.electronjs.org/docs/latest/tutorial/ipc^0|5|5|0|0|0|5|0|0|0|6|0|0|0|11|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@$A|17|B|18|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|19|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1A|8|@$A|1B|B|1C|F|G]]|9|@]|C|$]]|$1|O|3|P|5|J|7|1D|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1E|8|@$A|1F|B|1G|F|G]]|9|@]|C|$]]|$1|S|3|T|5|J|7|1H|8|@]|9|@]|C|$K|L]]|$1|U|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

Following the official <a href="https://www.electronjs.org/docs/latest/tutorial/ipc" rel="noreferrer">IPC tutorial</a> worked for me
main process:
<pre><code>import {dialog, ipcMain} from 'electron'
function createWindow () {
 mainWindow = new BrowserWindow({/*Your electron window boilerplate*/})
 ipcMain.handle('dialog:openDirectory', async () =&gt; {
 const { canceled, filePaths } = await dialog.showOpenDialog(mainWindow, {
 properties: ['openDirectory']
 })
 if (canceled) {
 return
 } else {
 return filePaths[0]
 }
 })
}
</code></pre>
preload script:
<pre><code>import {contextBridge, ipcRenderer} from 'electron'

contextBridge.exposeInMainWorld('myAPI', {
 selectFolder: () =&gt; ipcRenderer.invoke('dialog:openDirectory')
})
</code></pre>
Now you can call the selectFolder method from your application code and get the user input.
<pre><code>window.myAPI.selectFolder().then(result=&gt;{/* Do something with the folder path*/})
</code></pre>

I am very new to the electron. Can anyone suggest me how to get a local folder's relative path using the electron? JavaScript does not have that capability.

<a href="https://i.stack.imgur.com/RjY6N.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RjY6N.png" alt="enter image description here"></a>

I have a Choose File button(see snapshot), so my question is that when I select a folder and click on the open button then it should return a whole directory path.

How to get folder path using electron

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我对电子很陌生。有人能建议我如何利用电子获取本地文件夹的相对路径吗？JavaScript没有这种能力。​​我有一个选择文件按钮(见快照)，所以我的问题是，当我选择一个文件夹并单击打开的按钮时，它应该返回一个完整的目录路径。

问如何使用电子获取文件夹路径
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用电子获取文件夹路径EN