vue的element組件只能在瀏覽器獲取到文件夾的名字,但是如果在electron的包裝下可以獲得完整路徑。
先記錄一下eletron寫法 (沒試)
需要導入const ipcRenderer = require(“electron”).ipcRenderer;
<el-form-item label="選擇數(shù)據(jù)集" 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");
};
// 監(jiān)聽文件夾路徑
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('\\'))
},
但是必須要選中的文件夾里含有文件,因為是截取的,如果沒有文件獲取到的就是空的,是無法得到路徑的文章來源:http://www.zghlxwxcb.cn/news/detail-847352.html
還是不知道怎么完全寫打開一個目錄然后保存到此目錄。目前選擇的目錄如果無文件則覆蓋不到。文章來源地址http://www.zghlxwxcb.cn/news/detail-847352.html
到了這里,關于【關于前端打開本地文件夾獲取本地文件路徑】碰到需要打開本地文件路徑,然后選中路徑保存問題功能實現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!