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()方法將文件夾路徑和文件名拼接成文件路徑，遍歷文件並處理相關邏輯。需要注意的是，讀取文件夾操作也是異步的，在進行相關操作時需要注意異步執行的順序。