专栏首页一番码客vue选择多个文件并监听选择完成

vue选择多个文件并监听选择完成

一番码客 : 挖掘你关心的亮点。 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>

实际效果

点击“选择文件”,可以选中多个本地文件;

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

本文分享自微信公众号 - 一番码客(efonfighting),作者:Efonfighting

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • electron开发pdf合并工具(二)

    之前我们做了一个简单的界面,但其实并没有什么功能,今天我们基于前段时间一直在学习的vue相关知识,来实现一些后台逻辑。

    efonfighting
  • 打包python为windows可执行程序

    虽然这个是个很基础的问题,网上也有很多文章,但自己动手和网上有文章是两回事,自己动了手,有没有记录、下次是否还能解决又是另外一回事。

    efonfighting
  • 用pyinstaller打包时的图标问题

    因为昨天重新研究了下python的打包方法,今天一番准备把之前写的一个pdf合并软件重新整理一下,打包出来。

    efonfighting
  • 诺贝尔物理实验很难做?人工智能表示So Easy!

    GAIR 今年夏天,雷锋网将在深圳举办一场盛况空前的“全球人工智能与机器人创新大会”(简称GAIR)。大会现场,雷锋网将发布“人工智能&机器人Top25创新企...

    AI科技评论
  • 用Kotlin的方式来处理网络异常

    之前的文章 RxJava处理业务异常的几种方式 曾经介绍过 Retrofit 的异常可以有多种处理方式。

    fengzhizi715
  • 战斗天使 | AI时代不得不提的cover girls们

    「女生是理工科的珍稀动物,男生是文艺界的宝贵资源。」这一关于性别&职业的固有印象直至现在仍教大多数人习以为常。女性的科研之路似乎仍还只是「少数派」的游戏。

    深圳极视角
  • C++读写文本文件

    C++简单读写文本文件 fstream提供了三个类,用来实现C++对文件的操作。 fstream  打开文件供读写 ofstream  向文件写入内容 ...

    卡尔曼和玻尔兹曼谁曼
  • 利用Kotlin的方式如何处理网络异常详解

    之前的文章 RxJava处理业务异常的几种方式 曾经介绍过 Retrofit 的异常可以有多种处理方式。

    砸漏
  • 为什么会有奇奇怪怪的e

    中学学过的以10为底的对数,称为常用对数,记作lgN.但科学上常用的对数却以一个无理数e=2.71828…为底,称为自然对数,记作lnN或logeN。为什么以这...

    云深无际
  • 趋势已成:未来5年AI在银行业的5大应用

    大数据文摘

扫码关注云+社区

领取腾讯云代金券