vue upload验证
html
<el-form-item label="logo" prop="logo">
<el-upload
ref="upload" :file-list="fileList"
action="/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:http-request="submitUpload"
:on-change="handleChange"
:beforeUpload="beforeUpload"
:auto-upload="false"
:limit="1"
>
<i class="el-icon-plus"></i>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2Mb</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible" width="60%" append-to-body>
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
js
data:{
let validateUploadFile = (rule, value, callback) => {
let _this = this;
let uploadFiles = _this.$refs.upload.uploadFiles;
let flag = uploadFiles && uploadFiles.length;
if (!flag) {
callback(new Error('请上传图片'));
} else {
callback();
}
};
rules:{
logo: [
{required: true, trigger: ['blur', 'change'], validator: validateUploadFile},
]
}
}
methods:{
handleChange(){
this.$refs['form'].validateField("logo");
},
onSubmit() {
this.$refs['form'].validate((valid) => {
if(valid) {
this.$refs.upload.submit();
}
});
},
}
后记
在开始的时候el-form-item里加了required，导致验证的时候总是会出现提示logo is required，去掉之后即可
<el-form-item label="logo" prop="logo" required>
