elementuifrom表单提交_elementuiupload与form⼀起提交学⽣基本信息管理操作中，有照⽚，可以上传也可以不上传，在表单界⾯可以修改照⽚，el-upload控件可以带额外参数提交，jquery的post模拟不了成表单带⽂件提交的⽅式，因此，判断如果有上传⽂件时，⽤el-upload的submit⽅法，没有⽂件时使⽤post提交
页⾯部分：
:auto-upload="false"
:data="frmst"
action="/Admin_Areas/StInfo/SaveStinfo"
:show-file-list="false"
list-type="picture"
:on-change="filechange"
:before-upload="beforeAvatarUpload"
:
on-success="saveok">
上传照⽚
action设置后端接收地址，:data设置额外参数为学⽣的frm，list-type设置显⽰图⽚，on-change事件中设置⽂件上传标记，on-success 中设置提交完毕后返回数据的处理代码
data中：
photo: '', ⽤来绑定到图⽚对象
havefile: false //标记是否上传有⽂件
methods中：
reset() {
//初始化标记与表单数据
if (this.$refs.frmst) {
this.$setFields();//不起作⽤
}
this.frmst.act = '新增';
this.photo = '';
this.havefile = false;
}，
add() {
var that = this;
//表单字段太多，先全部清空
$.each(this.frmst, function (i, v) {
that.frmst[i] = '';
})
//再给设⼏个初始值
this.frmst.show = true;
this.frmst.act= '新增';
this.frmst.labelPosition = 'right';
this.frmst.sex = '男';
this.frmst.bl = false;
this.frmst.xjzt = '有';
},
edit(row) {
//修改记录
this.frmst.act = '修改';
var that = this;
$.each(row, function (key, val) {
that.frmst[key] = val;
})
//photo设置为后端获取图⽚的地址
this.photo = { url: '/admin_areas/stinfo/GetStinfoPhoto?id=' + row.stid + '&t='+Math.floor(Math.random() * 10 + 1) }; this.frmst.show = true;
},
save() {
var that = this;
$.each(this.frmst, function (i, v) {
if (v == null) {
that.frmst[i] = '';
}
})
this.$refs.frmst.validate(valid => {
if (valid) {
vue element adminif (this.havefile) {
this.$refs.upload.submit(); //上传控件提交
} else {
$.post('/Admin_Areas/StInfo/SaveStinfo', this.frmst, function (res) {
var r = eval('(' + res + ')')
if (r.success == true) {
that.setdata(that.frmst);
that.frmst.show = false;
vuesuccess(that);
} else {
vueerr(that, r.msg)
}
})
}
}
})
},
saveok(res, file, fileList) {
//上传控件提交后的返回结果处理
var r = eval('(' + res + ')')
if (r.success == true) {
this.$refs.upload.clearFiles();
this.setdata(this.frmst);
this.frmst.show = false;
vuesuccess(this);
} else {
vueerr(this, r.msg);
}
},
setdata(row) {
if (this.frmst.act == '新增') {
this.frmsrh.stid = row.stid;
}
this.list();
},
beforeAvatarUpload(file) {
const isJPG = pe === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$('上传头像图⽚只能是 JPG 格式!'); }
if (!isLt2M) {
this.$('上传头像图⽚⼤⼩不能超过 2MB!'); }
return isJPG && isLt2M;
},
filechange(file) {
//上传控件有⽂件变化
this.photo = file;
this.havefile = true;
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。