Vue选择文件夹获取绝对路径

一、从Vue获取项目绝对路径

在Vue中，我们可以使用process.env.BASE_URL获取当前项目的绝对路径。例如：

// 在项目中引入process模块
const path = require('path')

module.exports = {
  publicPath: './',
  configureWebpack: {
    resolve: {
      alias: {
        assets: '@/assets',
      }
    }
  },

  // 在这里修改输出文件夹名和路径等
  outputDir: path.resolve(__dirname, '../wwwroot/dist'),
  runtimeCompiler: true
}

这里的path.resolve()方法，可以将两个相对路径拼接成绝对路径。其中__dirname是Node.js自带的全局变量，代表当前文件所在的目录。

二、Vue获取图片使用绝对路径选取

在Vue中，我们可以使用相对路径或绝对路径来引用图片。当我们使用相对路径时，需要确保引用路径与图片所在路径相对应，否则会出现无法正常引用的情况。而使用绝对路径则可以避免这个问题。

要获取图片使用绝对路径选取，我们可以使用HTML5中的File API来实现。首先，我们需要在Vue项目中引入File API。以下是相关代码：

<input type="file" @change="handleFileChange">

methods: {
  handleFileChange(event) {
    // 获取选中的文件
    const file = event.target.files[0]

    // 创建FileReader对象
    const reader = new FileReader()

    // 读取文件内容
    reader.readAsDataURL(file)

    // 监听文件读取结束事件
    reader.onload = (event) => {
      // 获取图片的绝对路径
      const filePath = event.target.result
      console.log(filePath)
    }
  }
}

以上代码通过FileReader对象获取选中的文件，并获取该文件的绝对路径。需要注意的是，文件读取是异步操作，因此需要在文件读取结束后才能获取其路径。

三、其他注意事项

当使用Vue选择文件夹获取绝对路径时，还需要注意以下几点：

1、需要先安装相关依赖库。

npm install electron --save-dev
npm install electron-packager --save-dev
npm install fs --save-dev
npm install path --save-dev
npm install child_process --save-dev
npm install vuex --save-dev
npm install vue-router --save-dev
npm install axios --save-dev

2、需要使用HTML5文件选择器实现文件夹选择。

<input type="file" webkitdirectory directory @change="handleFolderChange">

其中，webkitdirectory和directory属性用于指定选择文件夹。handleFolderChange方法则用于处理选中文件夹的相关操作。

3、在获取文件夹路径时，需要使用Node.js中的fs和path模块。

// 引入相关模块
const fs = require('fs')
const path = require('path')

// 获取文件夹路径
const folderPath = event.target.files[0].path
console.log(folderPath)

// 读取文件夹中的文件
const files = fs.readdirSync(folderPath)
console.log(files)

// 遍历文件并处理相关逻辑
files.forEach((file) => {
    const filePath = path.join(folderPath, file)
    console.log(filePath)
})

以上代码通过fs.readdirSync()方法读取文件夹中的文件，使用path.join()方法将文件夹路径和文件名拼接成文件路径，遍历文件并处理相关逻辑。需要注意的是，读取文件夹操作也是异步的，在进行相关操作时需要注意异步执行的顺序。