快捷導(dǎo)航

vue3前端獲取文件的絕對(duì)路徑問(wèn)題解決

更新時(shí)間：2023年09月08日 09:20:37 作者：敲代碼的柯基

這篇文章主要給大家介紹了關(guān)于vue3前端獲取文件的絕對(duì)路徑問(wèn)題解決的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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

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

最后選擇了引入electron來(lái)獲取文件的絕對(duì)路徑。項(xiàng)目已經(jīng)使用electron進(jìn)行了打包，所以是可以通過(guò)electron方式運(yùn)行的，現(xiàn)在需要的就是vue的代碼中引入electron，進(jìn)行打開(kāi)文件管理器，實(shí)現(xiàn)文件路徑獲取。

首先要安裝相關(guān)的包：

npm install --save-dev electron
npm install --save-dev electron-builder

所有的界面代碼都是在vue項(xiàng)目中完成的所以vue中不再需要preload.js background.js這些文件

electron的通信是通過(guò)ipcRenderer實(shí)現(xiàn)的

在需要通信的文件中進(jìn)行調(diào)用

const { ipcRenderer } = require('electron')

這時(shí)候會(huì)報(bào)錯(cuò)，錯(cuò)誤顯示是node_modules/electron/index.js文件中引入fs.existsSync語(yǔ)句造成的

百度查資料得知原因是：

(1)、首先在渲染進(jìn)程屬于瀏覽器端，沒(méi)有集成Node的環(huán)境，所以類(lèi)似 fs 這樣的Node的基礎(chǔ)包是不可以使用。

(2)、因?yàn)闆](méi)有Node環(huán)境，所以這種屬于node api的require關(guān)鍵詞是不可以使用的。

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

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

vue.config.js配置：

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

然后通過(guò)使用window.require代替require來(lái)引入electron，因?yàn)榍罢卟粫?huì)被webpack編譯，在渲染進(jìn)程require關(guān)鍵字就是表示node模塊的系統(tǒng)渲染進(jìn)程：

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

這時(shí)候又出現(xiàn) window.require is not a function .錯(cuò)誤，這是因?yàn)楣こ淌窃诒镜貫g覽器運(yùn)行的，識(shí)別不了electron中的api,只要保證在electron應(yīng)用程序下運(yùn)行就不會(huì)報(bào)錯(cuò)

解決：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>

點(diǎn)擊頁(yè)面的按鈕就會(huì)向upload發(fā)送消息去進(jìn)行打開(kāi)文件管理的操作

在electron的包中main.js進(jìn)行接收

ipcMain.on('upload',(event,message)=>{
   console.log(message)
   dialog.showOpenDialog({
    title:'選擇要上傳的文件',//對(duì)話(huà)框的標(biāo)題
    buttonLabel: '確認(rèn)', //確定按鈕的自定義標(biāo)簽
    properties: [ 'openDirectory', 'multiSelections'], //打開(kāi)文件的屬性，打開(kāi)文件還是文件夾，隱藏文件,多選文件
   }).then(res=>{
    if(!res.canceled){
      console.log(res.filePaths)
      event.reply('get-file-path',res.filePaths)//拿到路徑后返回
    }
   }).catch(err=>{
    console.log(err)
   });
})

此時(shí)importStudy可以拿到絕對(duì)路徑了，但是前端瀏覽器沒(méi)辦法調(diào)試，后端是可以獲取到的。

總結(jié)

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

您可能感興趣的文章: