vue原生文件上传，可以多文件上传
2024-08-30 04:19:49
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>
最新文章
- MooseFs-分布式文件系统系列（二）之安装总结
- 深入JVM-java虚拟机的基本结构
- Gradle的配置实例
- Spring MVC 之请求处理方法可接收参数(三)
- DB other operation
- 解决nginx负载均衡的session共享问题
- [改善Java代码]让多重继承成为现实
- sql语句：if exists语句使用
- fastjson过滤不需要的属性
- (转)Mysql数据库存储引擎
- j2e应用相关技术
- 神经网络1_neuron network原理_python sklearn建模乳腺癌细胞分类器（推荐AAA）
- work-7.2
- HDU 1284(钱币兑换 背包/母函数)
- MySQL多实例部署与优化
- Android 监听手机GPS打开状态
- C++中const和指针
- Spring Security教程(一)：初识Spring Security
- Android——程序员的情怀——优化BaseAdapter
- C#客户端嵌入Chrome浏览器的实现