标签：false upload value 图表 file 数据流 const 上传

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()**的实例方法读文件内容，转成字符串传递给后端；

标签：false,upload,value,图表,file,数据流,const,上传
来源： https://blog.csdn.net/aliven1/article/details/118636922

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。