input file 获取上传文件真实路径和文件名

本人是在electron+vue项目上使用,如果使用无效,请自行调整或寻找他法。

1.样例代码

代码如下(示例):

<div
        class="add-file-right"
        style="height: 70px; margin-left: 100px; margin-top: 15px"
      >
        <div class="add-file-right-img" style="margin-left: 70px">
          上传文件:
        </div>
        <input
          type="file"
          ref="clearFile"
          id="filePath"
          name="file"
          @change="getFile($event)"
          multiple="multiplt"
          class="add-file-right-input"
          style="margin-left: 70px"
        />
</div>
<script>
export default {
  data() {
    return {
      filePath: "",
      fileName: "",
    };
  },
  methods: {
    getFile(obj) {
      var fileObj = document.getElementById("filePath").files[0];
      this.filePath = fileObj.path;
      this.fileName = fileObj.name;
      console.log(this.filePath);
      console.log(this.fileName);
    },
  },
};
</script>

选取文件以后就可以在控制台看到文件所在路径和文件名。
在这里插入图片描述

  • 7
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值