问题描述
首先我使用的是vue-cli +element Ui ,就是在表单中有上传图片环节,由于我们这边是先上传图片,提交表单的时候单独传imageUrl即可,官方表格演示中并没有表单校验图片流程,然后按照表单校验一般规则填写,无论是否上传图片,都有提示:图片不能为空,但是如果上传了图片,虽然有提示,但是也能提交成功,但是,这样对用户太不友好。
如何修改
下面是我的form表单中截取了图片上传一小部分,如果是在新增图片时不显示点击更换,如果是修改则显示更换;不需要的请忽略;
实现的原理: 主要是通过成功上传图片后单独清除image校验即可;
//html 部分
<el-form-item label="图片地址" prop="imageUrl">
<el-upload
class="avatar-uploader"
:action="upLoadUrl"
drag
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
<div v-else>
<i class="el-icon-upload avatar-uploader-icon"></i>
<p style="padding-top: 0;margin-top: 0;line-height: 16px">将文件拖到此处,或点击上传图片</p>
</div>
</el-upload>
<el-upload
v-show="editForm"
class="upload-demo"
:on-success="handleAvatarSuccess"
:show-file-list="false"
:action="upLoadUrl">
<el-button size="small" type="primary">点击更换</el-button>
</el-upload>
</el-form-item>
//js部分
data(){
let checkImage = (rule, value, callback) => {
if (!value) {
return callback(new Error('图片不能为空'));
}else{
callback()
}
};
return{
// 表单校验
rules: {
imageUrl: [
{ validator: checkImage,required: true }
],
},
}
}
handleAvatarSuccess(res, file) {
this.form.imageUrl = URL.createObjectURL(file.raw);
this.formUpLoadImgUrl = res.absoluteUrl;
let formField = this.$refs["form"].fields;
formField.map(i => {
if(i.prop === 'imageUrl'){ //通过prop属性值相同来判断是哪个输入框,比如:要移除prop为'imageUrl'
i.clearValidate();
return false
}
})
},
此种方法目前解决了我的需求,如果各位大佬另有高见,欢迎指导