1.單檔案上傳

<template>
  <div>
    <label for="fileInput">
      <i aria-hidden="true" class="cursor">上傳檔案</i>
    </label>
    <input
      v-show="false"
      type="file"
      id="fileInput"
      @change="handleFileChange"
      name="file"
      ref="file"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleFileChange(e) {
      let _this = this;
      let file = e.target.files;
      console.log(file,"單檔案流檔案流");
    }
  }
};
</script>

<style lang="scss" scoped>
.cursor {
  cursor: pointer;
  color: #409eff;
  font-size: 16px;
}
</style>
 

2.多檔案上傳

在input上加屬性 multiple="multiple"即可實現多檔案上傳，也可以設定檔案上傳型別是在input上加屬性 accept=".xls, .xlsx"

<template>
  <div>
    <label for="fileInput">
      <i aria-hidden="true" class="cursor">上傳檔案</i>
    </label>
    <input
      v-show="false"
      type="file"
      id="fileInput"
      @change="handleFileChange"
      accept=".xls, .xlsx"
      name="file"
      ref="file"
      multiple="multiple"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleFileChange(e) {
      let _this = this;
      let file = e.target.files;
     console.log(file,"多檔案檔案流檔案流");
    }
  }
};
</script>

<style lang="scss" scoped>
.cursor {
  cursor: pointer;
  color: #409eff;
  font-size: 16px;
}
</style>