使用element Form 自带校验功能，实现上传控件的校验

<template>
    <div class="upload-imgs flex align-items-center">
        <div class="uploadBox" v-if="ossUrl == ''" @click="triggerUpload">
            <i class="icon-Popeyes-fonticon-06"></i>
        </div>
        <div class="uploadBox" v-else @click="triggerUpload">
            <el-image
                    style="width: 100%;height: 100%"
                    :src="ossUrl">
                <div slot="placeholder" class="image-slot">
                    <i class="el-icon-loading fs-14"></i>
                </div>
            </el-image>
            <div class="mask">
                <i class="icon-Popeyes-fonticon-06"></i>
                <p>更换图</p>
            </div>
        </div>
        <span class="fs-12 tips ml-10">
            <slot name="slotTip">尺寸：400x400px，支持png、jpg，单张大小不超过1M</slot>
        </span>
        <el-upload
            ref="elUpload"
            class="avatar-uploader"
            style="display: none"
            action="111"
            :http-request="uploadImg"
            :limit="1"
            :show-file-list="false"
        ></el-upload>
    </div>
</template>

<script>
import emitter from '@/mixins/emitter'
export default {
    name: 'uploadImage',
    mixins: [emitter],
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            ossUrl: this.value
        }
    },
    watch: {
        value(newValue, oldValue) {
            this.ossUrl = newValue
        }
    },
    methods: {
        uploadImg(file) {
            this.$fetch.input_file({
                ...file,
                ...{type: 1}
            }).then((res) => {
                this.ossUrl = res.body.authUrl
                this.$emit('input', res.body.authUrl)
                this.$emit('uploadSuccess', res.body.authUrl)
                this.dispatch('ElFormItem', 'el.form.change') // 触发校验
            }).catch((err) => {
            })
        },
        triggerUpload(type) {
            this.$refs["elUpload"].$el.getElementsByTagName('input')[0].click()
        }
    }
}
</script>

elment plus 自定义组件表单校验

element plus自定义组件表单校验-CSDN博客

ant design vue 1.x 自定义组件表单校验
ant design vue1.x 自定义校验_1.x ant-design-vue date-range-picker 校验-CSDN博客