elementUI中form表单的upload上传图片及校验总结

38次阅读

共计 1474 个字符，预计需要花费 4 分钟才能阅读完成。

自定义校验方法, 因为我的项目是, 分情况, 可以选择是否有图, 所以我定义了一个变量 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(); 取值上传的, 要注意 , 取消其序列号, 我在公共的上传方法里封装好了, 所以这里就直接调用啦~