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中方法
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战