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

文章讲述了如何在Vue应用中结合ElementUI组件与Electron环境,实现文件夹路径的获取,包括使用`ipcRenderer`进行通信,以及处理无文件时的路径问题。
摘要由CSDN通过智能技术生成

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('\\'))
    },

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

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

  • 9
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值