vue3前端獲取文件的絕對路徑問題解決
公司的項目是基于vue3的,由于需求需要前端獲取用戶選的文件的絕對路徑。但是瀏覽器處于安全策略無法獲取真實的文件路徑,只能拿到相對路徑或者是D:\fakepath\xxxx.
看了網(wǎng)上很多方法都很坑,明明沒拿到路徑非說拿到了,浪費了很多時間,這里要說單純依靠vue是解決不了的?。?/p>
最后選擇了引入electron來獲取文件的絕對路徑。項目已經(jīng)使用electron進行了打包,所以是可以通過electron方式運行的,現(xiàn)在需要的就是vue的代碼中引入electron,進行打開文件管理器,實現(xiàn)文件路徑獲取。
首先要安裝相關(guān)的包:
npm install --save-dev electron npm install --save-dev electron-builder
所有的界面代碼都是在vue項目中完成的所以vue中不再需要preload.js background.js這些文件
electron的通信是通過ipcRenderer實現(xiàn)的
在需要通信的文件中進行調(diào)用
const { ipcRenderer } = require('electron')
這時候會報錯,錯誤顯示是node_modules/electron/index.js文件中引入fs.existsSync語句造成的
百度查資料得知原因是:
(1)、首先在渲染進程屬于瀏覽器端,沒有集成Node的環(huán)境,所以類似 fs 這樣的Node的基礎(chǔ)包是不可以使用。
(2)、因為沒有Node環(huán)境,所以這種屬于node api的require關(guān)鍵詞是不可以使用的。
(3)、electron5.x的node集成環(huán)境默認是關(guān)閉的,這之前的版本是默認開啟的
方案是在主進程中集成 Nodejs,也就是添加配置nodeIntegration: true
vue.config.js配置:
pluginOptions: { electronBuilder: { nodeIntegration: true, contextIsolation: false, } }
然后通過使用window.require代替require來引入electron,因為前者不會被webpack編譯,在渲染進程require關(guān)鍵字就是表示node模塊的系統(tǒng)渲染進程:
const { ipcRenderer } = window.require('electron')
這時候又出現(xiàn) window.require is not a function .錯誤,這是因為工程是在本地瀏覽器運行的,識別不了electron中的api,只要保證在electron應(yīng)用程序下運行就不會報錯
解決: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發(fā)送消息去進行打開文件管理的操作
在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可以拿到絕對路徑了,但是前端瀏覽器沒辦法調(diào)試,后端是可以獲取到的。
總結(jié)
到此這篇關(guān)于vue3前端獲取文件的絕對路徑問題解決的文章就介紹到這了,更多相關(guān)vue3獲取文件絕對路徑內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3?實現(xiàn)驗證碼倒計時功能(刷新保持狀態(tài))
倒計時的運用場景是需要經(jīng)常用到的,但是根據(jù)業(yè)務(wù)的不同,好比手機驗證碼或者是郵箱驗證碼之類的,即使用戶跳轉(zhuǎn)到其它頁面或者刷新,再次回到登錄也,驗證碼的倒計時也得保持狀態(tài),下面通過本文給大家分享Vue3?驗證碼倒計時功能實現(xiàn),感興趣的朋友一起看看吧2022-08-08Vue3的provide和inject實現(xiàn)多級傳遞的原理解析
Vue3中的provide和inject函數(shù)通過原型鏈實現(xiàn)數(shù)據(jù)的多級傳遞,父組件使用provide注入數(shù)據(jù),子組件和后代組件通過inject獲取這些數(shù)據(jù),在創(chuàng)建組件實例時,子組件會繼承父組件的provides屬性對象,介紹Vue3的provide和inject實現(xiàn)多級傳遞的原理,需要的朋友可以參考下2024-12-12使用Vue-scroller頁面input框不能觸發(fā)滑動的問題及解決方法
這篇文章主要介紹了使用Vue-scroller頁面input框不能觸發(fā)滑動的問題,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08