element-ui上传文件

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>