把国外的网站翻译过来做自媒体,云南创网科技有限公司,网站框架是谁做,电子商务网站建设总结报告解决vue3前端获取文件的绝对路径问题
公司的项目是基于vue3的#xff0c;由于需求需要前端获取用户选的文件的绝对路径。但是浏览器处于安全策略无法获取真实的文件路径#xff0c;只能拿到相对路径或者是D:\fakepath\xxxx. 看了网上很多方法都很坑#xff0c;明明没拿到路…解决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).ipcRendereripcRenderer.send(upload, import study)ipcRenderer.on(get-file-path, (event: any, arg: any) {console.log(arg)})})} }vue文件 button clickimportStudyimport/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可以拿到绝对路径了但是前端浏览器没办法调试后端是可以获取到的。
