公司的項目是基于vue3的，由于需求需要前端獲取用戶選的文件的絕對路徑。但是瀏覽器處于安全策略無法獲取真實的文件路徑，只能拿到相對路徑或者是D:\fakepath\xxxx.

看了網(wǎng)上很多方法都很坑，明明沒拿到路徑非說拿到了，浪費了很多時間，這里要說單純依靠vue是解決不了的??！

最后選擇了引入electron來獲取文件的絕對路徑。項目已經(jīng)使用electron進行了打包，所以是可以通過electron方式運行的，現(xiàn)在需要的就是vue的代碼中引入electron，進行打開文件管理器，實現(xià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的基礎包是不可以使用。

(2)、因為沒有Node環(huán)境，所以這種屬于node api的require關鍵詞是不可以使用的。

(3)、electron5.x的node集成環(huán)境默認是關閉的，這之前的版本是默認開啟的

方案是在主進程中集成 Nodejs，也就是添加配置nodeIntegration: true

vue.config.js配置：

 pluginOptions: {
        electronBuilder: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    }

然后通過使用window.require代替require來引入electron，因為前者不會被webpack編譯，在渲染進程require關鍵字就是表示node模塊的系統(tǒng)渲染進程：

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

這時候又出現(xiàn) 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發(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)試，后端是可以獲取到的。

總結

到此這篇關于vue3前端獲取文件的絕對路徑問題解決的文章就介紹到這了,更多相關vue3獲取文件絕對路徑內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論