Electron+Vue3+Vite项目拖拽文件无法获取内容问题求助

基于Electron 23.0.0 + Vue 3.2.0 + Vite的项目支持将文件夹拖拽到指定区域，但无法获取拖拽文件的内容，需解决该问题以读取拖拽进来的文件。

项目依赖版本 #

• electron: 23.0.0
• vue: 3.2.0

当前代码 #

<template>
  <div class="split-view">
    <div class="split-view-main">
      <div class="split-view-main-content">
        <div
          class="pane"
          ref="pane"
          @drop.stop.prevent="handleDrop"
          @dragover="handleDragover"
          @dragenter="handleDragover"
        >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { isFolder } from '@/utils/file'

  function handleDrop(e: DragEvent) {
    e.stopPropagation()
    e.preventDefault()

    let { items } = e.dataTransfer!

    console.log('items--->', e, items)
    if (items && items[0].webkitGetAsEntry() !== null) {
      isFolder(items)
    }
  }

  function handleDragover(e: any) {
    e.stopPropagation()
    e.preventDefault()
    e.dataTransfer.dropEffect = 'copy'
  }
</script>

控制台拖拽事件日志 #

1. 实现文件与文件夹的递归遍历 #

当前代码仅判断了是否为文件夹，未处理文件读取和文件夹递归遍历。修改handleDrop并添加遍历函数，实现文件内容读取：

<template>
  <div class="split-view">
    <div class="split-view-main">
      <div class="split-view-main-content">
        <div
          class="pane"
          ref="pane"
          @drop.stop.prevent="handleDrop"
          @dragover="handleDragover"
          @dragenter="handleDragover"
        >
          拖拽文件夹或文件到这里
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  // 递归遍历文件系统条目，读取文件内容
  async function traverseEntry(entry: FileSystemEntry) {
    if (entry.isFile) {
      // 获取文件对象
      const file = await new Promise<File>((resolve) => {
        (entry as FileSystemFileEntry).file(resolve)
      })
      // 读取文件内容（可根据需求改为arrayBuffer、blob等格式）
      const content = await file.text()
      return {
        type: 'file',
        path: entry.fullPath,
        name: entry.name,
        content
      }
    } else if (entry.isDirectory) {
      const dirReader = (entry as FileSystemDirectoryEntry).createReader()
      const entries = await new Promise<FileSystemEntry[]>((resolve) => {
        dirReader.readEntries(resolve)
      })
      // 递归遍历子目录/文件
      const children = await Promise.all(entries.map(traverseEntry))
      return {
        type: 'directory',
        path: entry.fullPath,
        name: entry.name,
        children
      }
    }
    return null
  }

  function handleDrop(e: DragEvent) {
    e.stopPropagation()
    e.preventDefault()

    const items = e.dataTransfer?.items
    if (!items) return

    // 遍历所有拖拽条目
    for (const item of items) {
      const entry = item.webkitGetAsEntry()
      if (entry) {
        traverseEntry(entry).then(result => {
          console.log('拖拽内容详情:', result)
          // 此处可添加文件内容的后续处理逻辑，如渲染到页面、保存到本地等
        })
      }
    }
  }

  function handleDragover(e: DragEvent) {
    e.stopPropagation()
    e.preventDefault()
    e.dataTransfer!.dropEffect = 'copy'
  }
</script>

2. 配置Electron主进程权限 #

确保Electron主进程的webPreferences配置正确，避免权限限制导致无法读取文件：

// main.ts
import { app, BrowserWindow } from 'electron'
import path from 'path'

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: false, // 若需直接使用Node.js API则关闭；注重安全性的话建议使用preload脚本
      nodeIntegration: true,
      allowFileAccess: true,
      webSecurity: false // 解决文件访问或跨域限制问题
    }
  })

  // 开发环境加载Vite地址，生产环境加载打包后的页面
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:5173')
  } else {
    mainWindow.loadFile(path.join(__dirname, '../dist/index.html'))
  }
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

3. 注意事项 #

• 若项目启用contextIsolation，建议通过preload脚本暴露文件读取API，避免直接开启nodeIntegration带来的安全风险。
• 读取大文件时，建议使用FileReader分段读取，避免内存占用过高。

内容的提问来源于stack exchange，提问作者XiaoLi_1456