vue实现本地路径选择
使用 <input type="file"> 实现基础文件选择
通过原生 HTML 文件输入元素触发本地路径选择：
<template>
<input type="file" @change="handleFileChange" />
</template>
<script>
export default {
methods: {
handleFileChange(event) {
const selectedFile = event.target.files[0];
console.log('Selected file path:', selectedFile.path); // 仅在 Electron 等环境中可用
console.log('File name:', selectedFile.name);
}
}
};
</script>注意：浏览器环境下无法直接获取完整路径（安全限制），仅能获取文件名和内容。
通过 Electron 实现完整路径选择
在 Electron 桌面应用中可使用 dialog 模块：
// 在 Vue 组件中
const { dialog } = require('electron').remote; // 渲染进程使用
methods: {
async openFileDialog() {
const result = await dialog.showOpenDialog({
properties: ['openFile', 'openDirectory'] // 支持选择文件或目录
});
if (!result.canceled) {
console.log('Selected path:', result.filePaths[0]);
}
}
}Electron 允许访问完整文件系统路径，需确保已正确配置 nodeIntegration。
使用第三方库（浏览器环境）
通过 vue-filepond 等库增强文件选择功能：
- 安装依赖：
npm install vue-filepond filepond - 示例代码：
<template> <file-pond @addfile="handleFileAdd"/> </template>
export default { components: { FilePond: vueFilePond() }, methods: { handleFileAdd(error, file) { if (!error) { console.log('File metadata:', file.filename); } } } };
``` 该库提供拖拽上传、预览等扩展功能，但仍受浏览器路径安全限制。注意事项
- 浏览器安全策略：现代浏览器禁止直接暴露完整本地路径，需通过
File API处理文件内容。 - Electron 限制：路径访问需在主进程或授权渲染进程中完成，避免直接暴露敏感操作。
- 用户隐私：明确告知用户路径选择的行为，符合 GDPR 等隐私法规要求。
