vue3前端获取文件的绝对路径问题解决

 更新时间:2023年09月08日 09:20:37   作者:敲代码的柯基  
这篇文章主要给大家介绍了关于vue3前端获取文件的绝对路径问题解决的相关资料,文中通过代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下

公司的项目是基于vue3的,由于需求需要前端获取用户选的文件的绝对路径。但是浏览器处于安全策略无法获取真实的文件路径,只能拿到相对路径或者是D:\fakepath\xxxx.

看了网上很多方法都很坑,明明没拿到路径非说拿到了,浪费了很多时间,这里要说单纯依靠vue是解决不了的!!

最后选择了引入electron来获取文件的绝对路径。项目已经使用electron进行了打包,所以是可以通过electron方式运行的,现在需要的就是vue的代码中引入electron,进行打开文件管理器,实现文件路径获取。

首先要安装相关的包:

npm install --save-dev electron
npm install --save-dev electron-builder

所有的界面代码都是在vue项目中完成的所以vue中不再需要preload.js background.js这些文件

electron的通信是通过ipcRenderer实现的

在需要通信的文件中进行调用

const { ipcRenderer } = require('electron')

这时候会报错,错误显示是node_modules/electron/index.js文件中引入fs.existsSync语句造成的

百度查资料得知原因是:

(1)、首先在渲染进程属于浏览器端,没有集成Node的环境,所以类似 fs 这样的Node的基础包是不可以使用。

(2)、因为没有Node环境,所以这种属于node api的require关键词是不可以使用的。

(3)、electron5.x的node集成环境默认是关闭的,这之前的版本是默认开启的

方案是在主进程中集成 Nodejs,也就是添加配置nodeIntegration: true

vue.config.js配置:

 pluginOptions: {
        electronBuilder: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    }

然后通过使用window.require代替require来引入electron,因为前者不会被webpack编译,在渲染进程require关键字就是表示node模块的系统渲染进程:

const { ipcRenderer } = window.require('electron')

这时候又出现 window.require is not a function .错误,这是因为工程是在本地浏览器运行的,识别不了electron中的api,只要保证在electron应用程序下运行就不会报错

解决:npm install --save is-electron

 function importStudy() {
            if (isElectron()) {
                window.ipcRenderer = window.require('electron').ipcRenderer
                ipcRenderer.send('upload', "import study")
                ipcRenderer.on('get-file-path', (event: any, arg: any) => {
                    console.log(arg)
                    })
                })
            }          
        }

vue文件:

 <button @click="importStudy">import</button>

点击页面的按钮就会向upload发送消息去进行打开文件管理的操作

在electron的包中main.js进行接收

ipcMain.on('upload',(event,message)=>{
   console.log(message)
   dialog.showOpenDialog({
    title:'选择要上传的文件',//对话框的标题
    buttonLabel: '确认', //确定按钮的自定义标签
    properties: [ 'openDirectory', 'multiSelections'], //打开文件的属性,打开文件还是文件夹,隐藏文件,多选文件
   }).then(res=>{
    if(!res.canceled){
      console.log(res.filePaths)
      event.reply('get-file-path',res.filePaths)//拿到路径后返回
    }
   }).catch(err=>{
    console.log(err)
   });
})

此时importStudy可以拿到绝对路径了,但是前端浏览器没办法调试,后端是可以获取到的。

总结

到此这篇关于vue3前端获取文件的绝对路径问题解决的文章就介绍到这了,更多相关vue3获取文件绝对路径内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 如何使用vite搭建vue3项目详解

    如何使用vite搭建vue3项目详解

    Vite 是一个面向现代浏览器的更轻,更快的web应用开发工具,下面这篇文章主要给大家介绍了关于如何使用vite搭建vue3项目的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Vue3 实现验证码倒计时功能(刷新保持状态)

    Vue3 实现验证码倒计时功能(刷新保持状态)

    倒计时的运用场景是需要经常用到的,但是根据业务的不同,好比手机验证码或者是邮箱验证码之类的,即使用户跳转到其它页面或者刷新,再次回到登录也,验证码的倒计时也得保持状态,下面通过本文给大家分享Vue3 验证码倒计时功能实现,感兴趣的朋友一起看看吧
    2022-08-08
  • Vue3的provide和inject实现多级传递的原理解析

    Vue3的provide和inject实现多级传递的原理解析

    Vue3中的provide和inject函数通过原型链实现数据的多级传递,父组件使用provide注入数据,子组件和后代组件通过inject获取这些数据,在创建组件实例时,子组件会继承父组件的provides属性对象,介绍Vue3的provide和inject实现多级传递的原理,需要的朋友可以参考下
    2024-12-12
  • Vue中子组件不能修改父组件传来的Prop值的原因分析

    Vue中子组件不能修改父组件传来的Prop值的原因分析

    在Vue中,父子组件之间通过Prop和Event实现了数据的双向绑定,但是,Vue设计者为什么不允许子组件修改父组件传递的Prop呢,本文就来带大家探究为什么子组件不能修改Prop,需要的朋友可以参考下
    2023-06-06
  • 一篇文章搞懂Vue3中如何使用ref获取元素节点

    一篇文章搞懂Vue3中如何使用ref获取元素节点

    过去在Vue2中,我们采用ref来获取标签的信息,用以替代传统 js 中的 DOM 行为,下面这篇文章主要给大家介绍了关于如何通过一篇文章搞懂Vue3中如何使用ref获取元素节点的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue.js iview打包上线后字体图标不显示解决办法

    vue.js iview打包上线后字体图标不显示解决办法

    这篇文章主要介绍了vue.js iview打包上线后字体图标不显示解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 使用Vue-scroller页面input框不能触发滑动的问题及解决方法

    使用Vue-scroller页面input框不能触发滑动的问题及解决方法

    这篇文章主要介绍了使用Vue-scroller页面input框不能触发滑动的问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • vue父子组件的嵌套的示例代码

    vue父子组件的嵌套的示例代码

    本篇文章主要介绍了vue父子组件的嵌套的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue3使用icon的两种方式实例

    Vue3使用icon的两种方式实例

    vue开发网站的时候,往往图标是起着很重要的作用,下面这篇文章主要给大家介绍了关于Vue3使用icon的两种方式,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-11-11
  • Vue3.0写自定义指令的简单步骤记录

    Vue3.0写自定义指令的简单步骤记录

    Vue中除了内置指令,也允许注册自定义的指令,下面这篇文章主要给大家介绍了关于Vue3.0写自定义指令的相关资料,需要的朋友可以参考下
    2021-06-06

最新评论