Solve the problem of obtaining the absolute path of the file on the vue3 front end

Solve the problem of obtaining the absolute path of the file on the vue3 front end

The company's project is based on vue3. Due to requirements, the front end needs to obtain the absolute path of the file selected by the user. However, the browser cannot obtain the real file path under the security policy. It can only obtain the relative path or D:\fakepath\xxxx. Many
methods on the Internet are very confusing. It is obvious that the path is not obtained, but it is said that it is obtained, which wastes a lot. Time, here I have to say that it cannot be solved simply by relying on Vue! !
Finally, I chose to introduce electron to get the absolute path of the file. The project has been packaged using electron, so it can be run through electron. What is needed now is to introduce electron into the vue code, open the file manager, and obtain the file path.
First you need to install the relevant packages:

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

All interface codes are completed in the vue project, so preload.js background.js is no longer needed in vue. The
communication of these files electron is implemented through ipcRenderer
and is called in the files that need to communicate.

const { ipcRenderer } = require('electron')

An error will be reported at this time. The error is caused by the introduction of the fs.existsSync statement in the node_modules/electron/index.js file.
Baidu checked the information and found out that the reason is:
(1) First, the rendering process belongs to the browser side and there is no integrated Node environment. , so Node’s basic packages like fs cannot be used.
(2) Since there is no Node environment, the require keyword belonging to the node api cannot be used.
(3) The node integration environment of
electron5
.

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

Then introduce electron by using window.require instead of require, because the former will not be compiled by webpack, and the require keyword in the rendering process represents the system rendering process of the node module:

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

At this time, the window.require is not a function error appears again. This is because the project is run in the local browser and cannot recognize the api in electron. As long as it is run under the electron application, no error will be reported. Solution
: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 statement:

 <button @click="importStudy">import</button>

Clicking the button on the page will send a message to upload to open the file management operation.
Main.js in the electron package will receive it.

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)
   });

})

At this time, importStudy can get the absolute path, but the front-end browser cannot debug it, and the back-end can get it.