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>

vant中方法

 

 

参考文章：http://blog.ncmem.com/wordpress/2023/11/15/vue%e4%b8%ad%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e6%96%b9%e6%b3%95/

欢迎入群一起讨论