Example code: Upload picture is required, plus
ref
and
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"]);
}