一、从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()方法将文件夹路径和文件名拼接成文件路径，遍历文件并处理相关逻辑。需要注意的是，读取文件夹操作也是异步的，在进行相关操作时需要注意异步执行的顺序。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/185502.html
微信扫一扫 
支付宝扫一扫 