在Vue中实现多文件选择并监听选择完成的事件

最编程 2024-01-12 09:41:27

...

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

本文目录：

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

前言

昨天我们实现了vue下获取单个文件的绝对路径，并且通过另外一个按钮将所选文件的路径显示出来。

显然这是很不人性化的，想要人性化，需要解决两个问题：

一次可以选择多个文件
文件选择完后立即显示出所有所选文件的绝对路径

vue中实现

代码

一次可以选择多个文件这个比较简单，就是需要在file组件里添加一个multiple="multiple"属性即可。
监听文件选择完成其实也很简单，就是给file组件添加一个值改变的监听事件，这个由change属性来实现。

所有最后关键的一行就是：

<input type="file" id="filename" style="display:none" multiple="multiple" @change="showRealPath"/>

完整实现代码如下：

<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: 10, maxRows: 40}"
        placeholder="请选择文件"
        v-model="textarea">
      </el-input>
    </div>

    <div align="center">
      <el-button type="primary" v-on:click="openFile()" round>选择文件</el-button>
      <input type="file" id="filename" style="display:none" multiple="multiple" @change="showRealPath"/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: ''
    }
  },
  methods: {
    openFile: function () {
      document.getElementById('filename').click()
    },
    showRealPath: function () {
      var files = document.getElementById('filename').files
      var paths = ''
      for (var i = 0; i < files.length; i++) {
        paths += (files[i].path + 'n')
      }
      // alert(paths)
      document.getElementById('input01').value = paths
    }
  }
}
</script>

实际效果

点击“选择文件”，可以选中多个本地文件；

完成选择后，所有文件的路径都会显示在输入框内。

上一篇： Vue.js项目中如何设置全局变量和函数？

下一篇：如何在Vue中使用TypeScript定义全局类型