概述
element-ui 组件上传文件个人见解
<template>
<el-upload
action="#"
accept=".xls,.xlsx"
:file-list="fileList"
:limit="1"
:show-file-list="false"
:auto-upload="false"
:on-change="importData">
/*
属性详解可以去element-ui官网查询
action:表示文件上传的地址,填写#表示不指定上传网址
accept:接受的文件类型
file-list:上传的文件放置位置
limit:限制上传的数量
auto-upload:是否自动上传
on-change:当文件上传时触发函数
*/
<el-button >批量導入</el-button>
</el-upload>
</template>
<script>
data(){
return {
fileList:[]
},
methods:{
importData (file,fileList) {
//file表示当前上传的文件,fileList:表示存放的文件的数组
let form = new FormData(); //创建表单文件,存放相关数据,可以存放上传文件
form.append('key',data)
form.append('file',file.raw) //或者可以form.append('file',fileList[0].raw) 这个仅针对只有一个文件的情况下,即fileList[0]==file
axios.post(`url`, form, {headers: { type:xx },}).then(res => {
//逻辑处理
})
)
}
}
</script>
最后
以上就是无心草丛为你收集整理的element-ui上传文件element-ui 组件上传文件个人见解的全部内容,希望文章能够帮你解决element-ui上传文件element-ui 组件上传文件个人见解所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复