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>           

複制

實際效果

點選“選擇檔案”，可以選中多個本地檔案；

完成選擇後，所有檔案的路徑都會顯示在輸入框内。