本人是在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>

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐