elementui表单验证图片上传为必填
2024-01-03 11:33:35
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
},
文章来源:https://blog.csdn.net/Web_Notes/article/details/135356922
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!