标签：selectFile form refs 重置 outerHtml file 清空 input type

本次需求如下：

<el-form
	ref="form">
	<el-form-item>
		<input 
			ref="selectFile"
			type="file"
			@change="selectFile"
			/>
	</el-form-item>
	<el-form-item>
		<el-button
			@click="saveData"
			>
			提交
		</el-button>
	</el-form-item>
</el-form>
<script>
	methods : {
		saveData () {
			var that = this//这里是为了像服务端发送请求时能够获取到页面元素，因为onload没有this
			//发送http请求
			var xhr = new XMLHttpRequest()
			xhr.onload = function (e) {
				//省略发送请求代码
				//重置方式一
				//选定元素，设置值为空
				//不一定非得refs，也可以用id、类，但要注意返回的是数组还是单个
				that.$refs.selectFile.value = ''//浏览器的安全机制不允许直接用js修改file的value为空字符串以外的值，强制修改会报错
				//重置方式er
				//重置outerHtml
				that.$refs.selectFile.outerHtml = that.$refs.selectFile.outerHtml
				//重置方式三
				//el-form自带的resetFileds
				//这里需要在在el-form-item设置props，否则不生效
				//that.$refs.form.resetFileds()
			}
		}
	}
</script>

总结：清空或重置原理即为选中该元素之后清空该元素值或者设为空，使用组件也需要对原理进行相应了解，现成组件用多了脑子就懒得动了

标签：selectFile,form,refs,重置,outerHtml,file,清空,input,type
来源： https://blog.csdn.net/qq_42345136/article/details/121613621

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