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/
欢迎入群一起讨论