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>