elementui from表单提交_elementui upload与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.$refs.frmst.resetFields();//不起作用

}

this.frmst.act = '新增';

this.photo = '';

this.havefile = false;

}，

add() {

this.reset();

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.reset();

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) {

if (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 = file.type === 'image/jpeg';

const isLt2M = file.size / 1024 / 1024 < 2;

if (!isJPG) {

this.$message.error('上传头像图片只能是 JPG 格式!');

}

if (!isLt2M) {

this.$message.error('上传头像图片大小不能超过 2MB!');

}

return isJPG && isLt2M;

},

filechange(file) {

//上传控件有文件变化

this.photo = file;

this.havefile = true;

},