學生基本信息管理操作中，有照片，可以上傳也可以不上傳，在表單界面可以修改照片，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;
},
