elementui upload與form一起提交

學生基本信息管理操作中,有照片,可以上傳也可以不上傳,在表單界面可以修改照片,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;
        },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章