vue原生文件上傳，可以多文件上傳

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>