學(xué)生基本信息管理操作中，有照片，可以上傳也可以不上傳，在表單界面可以修改照片，el-upload控件可以帶額外參數(shù)提交，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設(shè)置后端接收地址，:data設(shè)置額外參數(shù)為學(xué)生的frm，list-type設(shè)置顯示圖片，on-change事件中設(shè)置文件上傳標(biāo)記，on-success中設(shè)置提交完畢后返回數(shù)據(jù)的處理代碼

data中：

photo: '', 用來綁定到圖片對象

havefile: false //標(biāo)記是否上傳有文件

methods中：

reset() {

//初始化標(biāo)記與表單數(shù)據(jù)

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] = '';

})

//再給設(shè)幾個初始值

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設(shè)置為后端獲取圖片的地址

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

//上傳控件提交后的返回結(jié)果處理

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;

},

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的elementui from表单提交_elementui upload与form一起提交的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。