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

2024年1月4日 921次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞