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>

选取文件以后就可以在控制台看到文件所在路径和文件名。

经验分享 程序员 微信小程序 职场和发展