当前位置:首页 » 《资源分享》 » 正文

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

27 人参与  2024年03月28日 08:50  分类 : 《资源分享》  评论

点击全文阅读


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

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

npm install --save-dev electronnpm 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可以拿到绝对路径了,但是前端浏览器没办法调试,后端是可以获取到的。


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/86901.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 填错志愿后,我成了活神仙章节目录_顾言姜澈林晓晓优质全文_小说后续在线阅读_无删减免费完结_
  • 沈亦初秦景泽后续(以后,她都不要再喜欢他了)(沈亦初秦景泽)整本畅享在线+无广告结局
  • 独家猎户夫君你轻点宠小说(云柔苏安)(猎户夫君你轻点宠)电子书畅享阅读
  • 全网首发容止洛云曦小说叫什么(他死后女帝火葬场了)(容止洛云曦)全书阅读纯净阅读
  • 周砚川战景熙小说章节目录+序章(离婚后,保镖前夫他成了财阀大佬)全书畅享在线
  • 碎骨惨死后,我与宿敌联手弑夫证道特别篇章节目录+章节前文(齐南韵柳苑云)TXT清爽版在线
  • 重生八零年代点天灯后,崇洋***的养妹疯了章节目录_肖颖芝江天肖星苒书荒_小说后续在线阅读_无删减免费完结_
  • 最新章节(姜小九徐琛)霸婚总裁小蛮妻:结局+番外精品选集附加章节列表
  • 死后十年,妈妈收到我的死亡通知高口碑_妹妹爸爸妈妈大丫隐藏剧情_小说后续在线阅读_无删减免费完结_
  • 邻居连续偷菜93天小说(林婉清顾星河)章节目录+起点章节(邻居连续偷菜93天)全篇清爽版在线
  • 何时慢顾砚之后续(你惹她干嘛?她带四十米大刀来了)(何时慢顾砚之)整本畅享在线+无广告结局
  • 结婚纪念日当天,老公说他出差了必读文_陆言林姗老公内容精选_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1