自定义校验方法,因为我的项目是,分情况,可以选择是否有图,所以我定义了一个变量hasFmt,当他为false的时候,才会要求上传,走这个校验方法,rules里声明这个方法 var valiIcon = (rule, value, callback) => { // 图片验证 if (!this.hasFmt) { callback(new Error(‘请上传图片’)); } else { callback(); } icon:[ {required:true, validator: valiIcon, trigger: ‘change’ } // 图片验证 ]根据情况去切换hasFmt的值 就可以控制是否校验失败啦~~ 这就是校验图片的思路了,是不是很简单呢~~~再来说说表单带着图片一起上传fileChange(file,fileList){ this.bannerForm.filename = file.name; this.bannerForm.file = file.raw; console.log(file.raw) if(fileList.length>0){ this.hasFmt = true; }},例如,file change的时候,当fileList有值,就可以断定已经选取了图片了,讲file流保存好,(我这里是:this.bannerForm.file = file.raw;)并且可以把hasFmt变为ture啦,再者,file remover的时候 回显的时候, 等等,都要根据情况改变hasFmt的值,来达到图片的校验上传是这样的:this.$refs.bannerForm.validate((valid) => { if(valid){ let param = new FormData(); this.toBannerBtn = true; param.append(‘file’,this.bannerForm.file,this.bannerForm.filename); param.append(’tokenId’,this.$store.state.user.tokenId); param.append(’titleShort’,this.bannerForm.title_short); param.append(‘bannerType’,‘1’); param.append(’linkId’,this.bannerForm.link); param.append(‘articleId’,this.bannerForm.articleId); console.log(param) this.$post(‘bannerInfo/save’,param).then(res =>{ // console.log(res); if(res.code == 0){ this.$message({ type: ‘success’, message: res.msg }); setTimeout(() => { this.newsList(); }, 1000); this.bannerForm={}; this.bannerDialog = false; }else{ this.$message({ type: ‘warning’, message: res.msg?res.msg:‘出错了’ }); } this.toBannerBtn = false; }) } })表单校验后,就可以进行上传啦,采用的是new FormData();取值上传的,要注意 ,取消其序列号,我在公共的上传方法里封装好了,所以这里就直接调用啦小可爱们,如果觉得学到了一点点,麻烦点个赞哟,灰常感谢啦~
...