解决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进行接收文章来源：https://www.toymoban.com/news/detail-699801.html
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可以拿到绝对路径了，但是前端浏览器没办法调试，后端是可以获取到的。文章来源地址https://www.toymoban.com/news/detail-699801.html
到了这里，关于解决vue3前端获取文件的绝对路径问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
