vue下获取所选文件绝对路径

efonfighting

发布于 2019-10-22 19:40:16

24.5K5

发布于 2019-10-22 19:40:16

文章被收录于专栏：一番码客一番码客

一番码客 : 挖掘你关心的亮点。 http://efonfighting.imwork.net

本文目录：

前言vue中实现代码实际效果一番今日

前言

我们在开发electron桌面应用时，因为常常希望对一些本地文件做一些操作，需要获取到这个文件的绝对路径。今天一番在electron-vue下实现了单击按钮选择文件，并获取文件绝对路径然后显示出来的效果。在本来要放弃的时候突然柳暗花明。

vue中实现

代码

这里涉及到在vue中定义和调用函数，需要用到关键字methods,然后便可以在里面定义函数了。

这里关键点：

document.getElementById('open').files[0].path，这里获取文件路径的方法是获取文件类元素的数组，然后通过path关键字获取文件的绝对路径。

<template>
  <div id="wrapper" align="center">
    <img id="logo" src="~@/assets/logo_efonmark.png" alt="electron-vue" align="center">
    <div align="center">
      <h1> Welcome to EfonMark!</h1>
    </div>

    <div align="center">
      <el-input id="input01"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 10}"
        placeholder="请选择文件"
        v-model="textarea">
      </el-input>
    </div>

    <div align="center">
      <el-button type="primary" v-on:click="openFile()" round>选择文件</el-button>
      <el-button type="primary" v-on:click="showRealPath()" round>显示路径</el-button>
      <input type="file" name="filename" id="open" style="display:none" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: ''
    }
  },
  methods: {
    openFile: function () {
      document.getElementById('open').click()
    },
    showRealPath: function () {
      document.getElementById('input01').value = document.getElementById('open').files[0].path
    }
  }
}
</script>