<template>
	<el-card class="box-card">
		<h2 style="margin-bottom: 20px;">element-ui导入Excel文件</h2>

		<el-upload multiple action="fileUrl" :limit="limitNum" accept=".xls,.xlsx,csv" :file-list="fileList"
			:before-upload="beforeUpload" :on-exceed="onExceed" :on-success="onSuccess" :show-file-list="showFileList"
			:http-request="uploadFile">
			<el-button type="primary">导入</el-button>
		</el-upload>

	</el-card>
</template>

<script>
	export default {
		data() {
			return {
				fileUrl: '', //上传文件的域名地址
				limitNum: 3, //文件上传个数限制
				fileList: [], //文件列表
				showFileList: false //文件列表是否显示,默认不显示
			};
		},
		methods: {
			// 文件上传类型
			// application/vnd.openxmlformats-officedocument.spreadsheetml.sheet --- 后缀为 .xlsx
			// application/vnd.ms-excel --- 后缀为 .xls或.csv
			//文件上传之前的钩子,可以做一些验证或限制
			beforeUpload(file) {
				console.log('beforeUpload', file);
				let regExp = file.name.replace(/.+\./, '');
				let lower = regExp.toLowerCase(); //把大写字符串全部转为小写字符串
				let suffix = ['xls', 'xlsx'];
				if (suffix.indexOf(lower) === -1) {
					return this.$message.warning('请上传后缀名为 xls、xlsx 的附件 !');
				}
				let isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					return this.$message.error('请上传文件大小不能超过 2MB 的附件 !');
				}
			},
            //导入表格格式校验,后端已做验证，这个暂时不需要
            // beforeUpload(file) {
            //   // let regExp = file.name.replace(/.+\./, '');
            //   // let suffix = ['xls', 'xlsx'];
            //   // if (suffix.indexOf(regExp.toLowerCase()) === -1) {
            //   // 	return this.$message.warning('请上传后缀名为 xls、xlsx 的附件 !');
            //   // }
            // },
			//文件超出个数限制时的钩子
			onExceed(files, fileList) {
				console.log('onExceed-files', files);
				console.log('onExceed-fileList', fileList);
				return this.$message.warning(`只能选择${this.limitNum}个文件,当前共选择了${files.length+fileList.length}个`)
			},
			//文件上传成功时的钩子
			onSuccess(response, file, fileList) {
				console.log('onSuccess', response);
				console.log('onSuccess', file);
				console.log('onSuccess', response);
			},
			//覆盖默认的上传行为,可以自定义上传的实现
			uploadFile(item) {
				console.log('uploadFile', item);
				let formData = new FormData();
				formData.append('token', 'hgjjdsjj655756');
				formData.append('file', item.file);
				formData.append('file_name', item.file.name);
                //请求接口
				// this.$axios.post(formData).then((res) => {})
			}
		}
	}
</script>

<style>
</style>