1. 使用原生input的标签,type为file

<template>
	<form>
		<input
			ref='upload_sheet'
			placeholder="请输入内容"
			type="file"
			accept="*"
			id="sheet_form"
			@click="resetValue"
			@change="temUpload($event)"
		/>
	</form>
	<p class="boxs type_tips">
		只能上传xlsx或csv类型的文件，且不超过{{file_limit}}KB
	</p>
</template>
<span slot="footer" class="dialog-footer">
	<el-button @click="upLoadSheet(false)">取 消</el-button>
	<el-button type="primary" @click="upLoadSheet(true)">确 定</el-button>
</span>

多次上传文件，如果文件名相同，文件重新上传失败的问题：文件名相同，change事件没有触发；
解决办法：在input上同时绑定click和change事件，click先执行，每次click触发的时候，重置input的vulue值为空字符串

resetValue(){
	// 清除数据上传的信息
	// 用户点击输入框的时候，清处上次保存的文件名
	// 入股不清除，两次文件名相同的话，change时间不会触发
	this.file_value=null;//清除上传的表数据
	this.$refs.upload_sheet.value='';//清除表的文件名
},

2. 暂存上传的表格

temUpload(event) {
	this.file_value = event.target.files[0]; //获取文件
	// console.log(file_value);
	const check_result=this.handleExceed(this.file_value);
	if(check_result===false){
		this.resetValue()
	}
}

3. 确认按钮上传表数据

3.1：设置header：header: {
			"Content-Type": "multipart/form-data"
		},
3.2：newParams=new FormData()，使用FormData格式化数据
		for (let key in params) {
			newParams.append(key, params[key])
		}
3.3：processData: false：不使用默认方式处理数据

async upLoadSheet(onoff){
	// 上传表格或却取消上传，关闭el_dialog
	if(onoff===true&&this.file_value!=null){
		const params = {
			file:this.file_value
		};
		const config = {
			header: {
				"Content-Type": "multipart/form-data"
			},
			processData: false
		}
		const res = await this.$Http.table_upload(params, '', true, config)
		console.log(res)
		if(res.statusText==='OK'){
			this.global_utils.responseTips.call(this,`${res.data},上传成功！`)
		}
		this.upload_table_switch=false;
	}else{
		this.resetValue()
		this.upload_table_switch=false;
	}
}

4.new FileReader()的使用

如果使用el-upload,则需要自己定义文件读取函数，使用 **new FileReader()**的实例方法读文件内容，转成字符串传递给后端；