Verification of uploading pictures in element form

clipboard.png
this is the initial effect;

 handleAvatarSuccess(res, file) {
        //
        this.imageUrl = res.data;
        this.form.slideshowPicture = res.data;
        debugger;
        this.$refs.upImg.clearValidate();
    },
    
        <el-form-item label="" :label-width="formLabelWidth" prop="imageUrl" ref="upImg">
                <el-upload class="avatar-uploader" v-model="imageUrl"  :action=GLOBAUPIMGLURLslideshow :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="GLOBALURL+imageUrl"  class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

this is my html fragment
shouldImg= (rule, value, callback) = > {

    debugger;
    if (!value) {
        return callback(new Error(""));
    }else{
        callback();
    }
};
Sep.16,2021

clipboard.png

I usually use this structure < el-form-item/ > < el-input/ > < el-upload/ > . After the picture is uploaded successfully, change the binding value of v-model in el-input , and check this value in the check function of el-form-item to check whether the picture has been uploaded successfully.
that is, < el-form-item/ > verifies the value of < el-input/ > under it.
I hope I can help you ~

Menu