【无标题】

element upload做为导入文件，点击导入按钮直接弹出选择框

在按钮的地方引入组件

在点击方法中触发选择文件框事件，可以打印 this.$refs查看，

toGuide(){
      this.$refs['importFile'].$refs['fileRefs'].$refs['upload-inner'].handleClick()
    },

<template>
	<div>
			<el-upload
				ref="fileRefs"
				class="upload-demo"
				action=""
				:limit="1"
				:http-request="uploadAfterCheck"
				accept=".xls,.xlsx"
				:auto-upload="true"
			>
			</el-upload>
	</div>
</template>
<script>
export default {
	data() {
		return {
			fileObj: {},
		};
	},
	watch: {
		
	},
	computed: {
	},
	methods: {
		handleClose() {
			this.$refs.fileRefs.clearFiles();
		},
		uploadAfterCheck(param) {
			this.$loading({
				lock: true,
				text: "上传文件中...",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)",
			});
			var fileObj = param.file;
			var form = new FormData();
			// 文件对象
			form.append("file", fileObj);
			uploadFile(form)
				.then((res) => {
					if (res.code === 1) {
						this.$message.success({
							message: `正在上传，请稍后刷新`,
						});
						this.handleClose();
						this.$emit("fileRefs");
					} else {
						this.$message.error({
							message: `上传失败`,
						});
					}
				})
				.catch(() => {
					this.$message.error({
						message: `上传失败`,
					});
				})
				.finally(() => {
					console.log("finally");
					this.$loading().close();
				});
		},
	},
};
</script>
<style lang="scss">
</style>

ps:使用http-request时适合上传一个文件，因为upload的其他方法会失效，所以多个文件同时上传不好把握是否哪个文件上传成功，哪个失败