Upload_上传_并传递额外参数

清风不是明月

已于 2022-02-25 21:24:54 修改

阅读量1.5k

点赞数

分类专栏：前端_UI 框架文章标签： vue.js ui elementui

于 2021-12-14 17:22:12 首次发布

本文链接：https://blog.csdn.net/weixin_55806809/article/details/121633951

版权

前端_UI 框架专栏收录该内容

18 篇文章 1 订阅

订阅专栏

这个博客展示了如何在Vue中实现一个文件上传组件，利用el-upload元素与后台进行交互。在上传前，它会改变按钮状态显示'上传中...'并禁用上传功能。成功上传后，会根据服务器响应的HTTP状态码展示成功或错误消息，并重新加载页面数据。如果上传失败，会显示错误提示。

摘要由CSDN通过智能技术生成

页面代码

	<!--导入-->
	<!--:data绑定传到后台的参数-->
	<el-upload
		style="display: inline-flex"
		:show-file-list="false"
		:before-upload="beforeUpload"
		:on-success="onSuccess"
		:on-error="onError"
		:disbaled="iDisable"
		:data={id:this.id}
		action="/dormitry/info/excel/upload"><!--url-->
		<el-button :icon="iIcon" :disabled="iDisable">{{iText}}</el-button>
	</el-upload>

js代码

return {
	iDisable: false,
	iText: '导入数据',
	iIcon: 'el-icon-upload2',
}
//导入
beforeUpload() {
	this.iIcon= 'el-icon-loading';
	this.iText= '上传中...';
	this.iDisable= true;
},
onSuccess(resp, file, fileList) {
	this.iIcon= 'el-icon-upload2';
	this.iText= '导入数据';
	this.iDisable= false;
	if(resp.status == 500){
		this.$message.error({message:resp.msg});
	}else{
		this.$message.success({message:resp.msg});
		this.initDate();//初始化页面刷新数据
	}
},
onError() {
	this.iIcon= 'el-icon-upload2';
	this.iText= '导入数据';
	this.iDisable= false;
	this.$message.error('导入失败');
},