您现在的位置是:首页 > 技术教程 正文

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

admin 阅读: 2024-03-29
后台-插件-广告管理-内容页头部广告(手机)

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

公司的项目是基于vue3的,由于需求需要前端获取用户选的文件的绝对路径。但是浏览器处于安全策略无法获取真实的文件路径,只能拿到相对路径或者是D:\fakepath\xxxx.
看了网上很多方法都很坑,明明没拿到路径非说拿到了,浪费了很多时间,这里要说单纯依靠vue是解决不了的!!
最后选择了引入electron来获取文件的绝对路径。项目已经使用electron进行了打包,所以是可以通过electron方式运行的,现在需要的就是vue的代码中引入electron,进行打开文件管理器,实现文件路径获取。
首先要安装相关的包:

npm install --save-dev electron npm install --save-dev electron-builder
  • 1
  • 2

所有的界面代码都是在vue项目中完成的所以vue中不再需要preload.js background.js这些文件
electron的通信是通过ipcRenderer实现的
在需要通信的文件中进行调用

const { ipcRenderer } = require('electron')
  • 1

这时候会报错,错误显示是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, } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

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

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

这时候又出现 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) }) }) } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

vue文件:

  • 1

点击页面的按钮就会向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) }); })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

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

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索