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

2024年5月17日 206次阅读 来源: orange

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

小可爱们,如果觉得学到了一点点,麻烦点个赞哟,灰常感谢啦~

    原文作者：orange
    原文地址: https://segmentfault.com/a/1190000017552781
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞