Example code: Upload picture is required, plus
refand
prop

<el-form-item label=" beforeIMG "prop="imageUrl" bb0 <el-upload ref="upload" action="/webCenter/file/api/uploadAttachment" multiple :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="fileUploadSuccess" :before-upload="beforeUpload" :data="fileData" :show-file-list=false accept="image/*" > <el-button size="small" type="primary"> </el-button> </el-upload> </el-form-item> </el-button> </el-upload> </el-form-item>

Problem 1: A message will still appear after uploading a picture

fileUploadSuccess(res) {
    this.$refs.beforeImg.clearValidate()
    this.$message.success(res.msg)
}

Solution: after successful upload, need through this. $refs. BeforeImg. ClearValidate validation () to form item separately, the prompt message will disappear.

Problem 2: The image has been uploaded, but when submitting the form, the validation rule still fails and is displayed as false

Solution: Before submitting the form or opening the form, check whether there is a value in the list of uploaded files. If there is a value, cancel the check.

import _ from "lodash";
if (this.filelist.length) {
    _.unset(this.rules, ["imageUrl"]);
}