elementui表单验证图片上传为必填

本文主要是介绍elementui表单验证图片上传为必填，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.form表单 上传自己看着写

 <el-form ref="formOut" :model="formData" :rules="formRules" label-width="120px"><el-form-item label="图标" prop="img"><div style="display: flex"><el-upload class="upload-demo" :action="url + '/file/put-file'" :on-success="(res) => {onSuccess(res, 'formData');}" :limit="1" :file-list="fileList" :show-file-list="false" ref="uploadImg1"><div v-if="formData.img"><img :src="formData.img" alt="" style="width: 50px; height: 50px" /><i class="el-icon-delete iconClass_del" @click.stop="delPic('formData')"></i></div><el-button v-else size="small" type="primary">点击上传</el-button></el-upload></div></el-form-item></el-form>

2.rules验证规则

 formRules: {img: [{required: true,validator: this.fileMustUpload,trigger: "change",},],}

3.自定义验证方法

    fileMustUpload(rule, value, callback) {if (this.formData.img == null) {// 未上传文件callback("请上传图标");}callback();//不要忘记写这个callback},

这篇关于elementui表单验证图片上传为必填的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---