【关于前端打开本地文件夹获取本地文件路径】碰到需要打开本地文件路径,然后选中路径保存问题功能实现

hahah12345678 2024-06-18 16:03:02 阅读 51

vue的element组件只能在浏览器获取到文件夹的名字,但是如果在electron的包装下可以获得完整路径。

先记录一下eletron写法 (没试)

需要导入const ipcRenderer = require(“electron”).ipcRenderer;

<el-form-item label="选择数据集" prop="image_path"> <el-input v-model="ruleForm.image_path" placeholder="请选择文件夹" disabled> <template #append> <el-button icon="FolderOpened" @click="openDataSetFile" /> </template> </el-input> </el-form-item>const openDataSetFile = () => { ipcRenderer.send("window-openFile");};// 监听文件夹路径ipcRenderer.on("getFilePaths", (e, data) => { if (data) { ruleForm.image_path = data[0]; }});

我尝试过的可以正常打开然后获取文件夹路径

<el-form-item label="图路径" label-width="200px" prop="input_path"> <el-input v-model="dataForm.input_path" style="width:800px;margin-left:100px;height:35px"> <template slot="prepend" style="width:200px"> <div class="upfile"> <!-- <span>选择文件</span> --> <p><i class="el-icon-folder-opened icon-large" /></p> <input type="file" style="opacity: 0;" webkitdirectory directory @change="handleFolderChange"> </div> </input> </template> </el-input> </el-form-item><style>.icon-large { font-size: 14px; /* 设置图标大小 */}.el-input--mini .el-input__inner { height: 37px; line-height: 28px;}p{position: absolute;justify-content: space-between;width: 15%;}i{display: inline-block;width: 6em;height: 3em;}.upfile{color: rgb(16, 2, 2); width: 22px; /* display: flex; */ align-items: center; /* 垂直居中 */ height: 35px; /* 设置 div 的高度 *//* border: 1px solid #7d7290;padding: 0;height: 2.4em; */} handleFolderChangedst(event) { const files = event.target.files // 处理选择的文件夹 console.log('Selected folder:', files) this.dataForm.input_path = files[0].path.substring(0, files[0].path.lastIndexOf('\\')) },

但是必须要选中的文件夹里含有文件,因为是截取的,如果没有文件获取到的就是空的,是无法得到路径的

还是不知道怎么完全写打开一个目录然后保存到此目录。目前选择的目录如果无文件则覆盖不到。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。