Electron Vue用Input file打开文件、拖放文件并获得文件本地真实绝对路径

塔思

已于 2025-01-13 17:42:41 修改

阅读量1.1k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： electron 文章标签： electron javascript 前端 vue

于 2025-01-13 17:42:07 首次发布

本文链接：https://blog.csdn.net/gtnes/article/details/145120272

网上找了好多Input file获取文件真实本地路径的方法都宣告失败，经过自己的摸索，发现Electron版本高于30之后就无法通过Input file方式获取文件路径。具体测试不太严谨，还请见谅；。

项目分支用不同的electron版本做了测试，目前这几个版本的electron测试可用。electron 31版本的测试过，不可用。所以提醒大家，如果需要此功能，尽量选择低版本的Electron版本。

经过不断尝试和测试，写了一个示例，用了三种方式，已经很全面了。

1.调用IPC dialog获取文件路径

2.用Input File模式获取文件真实Path

3.拖放文件获取真实Path

想要研究的宝子，可以参考这个方法。项目写的比较随便和匆忙，有不当之处还请见谅。

项目地址： GitHub - gtnes/my-electron-app-chooseFile: electron input file模式选择，拖放文件，获取文件本地真实路径案例

以下是关键文件，App.vue的代码。

<template>
  <div>
    <div style="color: red; font-size: 16px; margin: 10px 0;">注意，项目使用的electron版本</div>
    <div style="color: #666; font-size: 14px; margin: 10px 0;">==========================方案1 electron dialog 文件上传=============================</div>
    <!-- electron dialog 文件上传 -->
    <FileUploader
      label&