学生基本信息管理操作中,有照片,可以上传也可以不上传,在表单界面可以修改照片,el-upload控件可以带额外参数提交,jquery的post模拟不了成表单带文件提交的方式,因此,判断如果有上传文件时,用el-upload的submit方法,没有文件时使用post提交
页面部分:
<el-form-item label-width="30px">
<el-upload ref="upload" name="photo" style="margin:0 auto;"
: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">
<el-link style="text-align:center;width:178px;">上传照片</el-link>
<img v-if="photo.url" :src="photo.url" style="width:178px;height:220px;">
</el-upload>
</el-form-item>
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;
},