electron 怎么接收拖放文件路径
时间: 2024-10-07 11:00:32 浏览: 11
在 Electron 中,你可以利用其内建的 `BrowserWindow` API 来处理拖放 (Drag and Drop) 操作,包括接收文件路径。以下是基本步骤:
1. 首先,你需要在创建 `BrowserWindow` 的时候开启允许拖放功能。在创建窗口时传入一个配置对象,设置 `webPreferences` 属性,如:
```javascript
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
webPreferences: {
contextIsolation: false, // 这里需要,因为 contextIsolation 禁止了 drag&drop
nodeIntegration: true,
},
})
```
2. 接下来,在窗口加载完成后,监听 `drag-enter`、`drag-over` 和 `drop` 事件,分别对应拖动目标进入、移动到和离开窗口的情况:
```javascript
win.webContents.on('did-finish-load', () => {
win.addEventListener('drag-enter', (event) => {
event.preventDefault()
event.dataTransfer.dropEffect = 'copy' // 设置可以复制
})
win.addEventListener('drag-over', (event) => {
event.preventDefault()
})
win.addEventListener('drop', async (event) => {
event.preventDefault()
const droppedFiles = event.dataTransfer.files // 这里就是接收的文件列表
if (droppedFiles.length > 0) {
for (let file of droppedFiles) {
console.log('Dropped file:', file.path) // 打印文件路径
// 在这里处理文件,比如读取、保存等操作
}
}
})
})
```
当你将文件从桌面或其他支持拖放的地方拖放到这个窗口上,就会触发上述事件,从中获取文件路径。