vue+axios+element导入excel

总结：type类型是file的input框上传的文件，都可以用formData对象上传，我的代码很简单，非常简单，very简单，没有网上的复杂，所以分享出来，供大家参考。

1.接口部分

注意点1：必须设置headers的content-type为multipart/form-data，不然后台会报the current request is not multipart request

注意点2：这里有两个参数，第一个是用formData转化的文件，第二个是以对象传过来的需要用的字符串

// 客户-导入客户
export const apiImportCusExcel = (formData, params) => {
	return new Promise((resolve, reject) => {
		instance.post(
			baseApi+'/api/console/customer/customerImport?customerGroupTypeId='+params.customerGroupTypeId+'&importType='+params.importType+'&isSupplementCustomerInfo='+params.isSupplementCustomerInfo+'&seaId='+params.seaId,
			formData,
			{
				headers: {
					'Content-Type': 'multipart/form-data'
				}
			}
		)
		.then(response => {
			resolve(response.data)
		})
		.catch(error => {
			reject(error)
		})
	})
}

2.数据处理部分

注意点1：文件上传改变事件的file.raw就是我们要上传的文件

注意点2：注意点1中的文件用FormData对象append一下，其余的都是常规的接口数据处理操作。

handleImportCusChange(file, fileList){
	let self = this;
	self.importCus.fileTemp = file.raw
},
importCusFile() {
	let self = this;
	let file = self.importCus.fileTemp;
	var fileFormData = new FormData();
	fileFormData.append('file', file);
	let passObj = {
		importType: 1,
		testId: 3
	}
	apiImportCusExcel(fileFormData, passObj).then(response => {
		if(response.code === abbr.okId){
			self.$message({
				showClose: true,
				message: response.msg,
				type: 'success'
			});
			self.closeModel('addCus');
		}else{
			self.$message({
				showClose: true,
				message: response.msg,
				type: 'warning'
			});
		}
	}).catch(error => {
		
	})
},

3.页面部分

注意点1：limit是限制每次可以上传多少个文件，我的变量设置的1

注意点2：这里没有action，因为我是自定义的上传方法，不调用组件的submit方法

注意点3：这里的accept复制的https://segmentfault.com/a/1190000018993619?utm_source=tag-newest#articleHeader2这个分享者所写的，由于该分享者写得太复杂，我没采用，抄了自己以前写得图片上传的代码

<el-upload ref="importCusBtn"
	:on-change="handleImportCusChange"
	:limit="importCus.limitUpload"
	accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
	:auto-upload="false">
	<el-button size="small" type="primary">点击上传</el-button>
	<div slot="tip" class="el-upload__tip">只 能 上 传 xlsx / xls 文 件，只能同时导入一个文件哦！</div>
</el-upload>

<el-button type="primary" @click="handleImportCusClick">导入</el-button>