elementUI中form表單的upload上傳圖片及校驗總結

自定義校驗方法,由於個人項目是,分狀況,能夠選擇是否有圖,因此我定義了一個變量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();取值上傳的,要注意 ,取消其序列號,我在公共的上傳方法裏封裝好了,因此這裏就直接調用啦~

---

小可愛們,若是以爲學到了一點點,麻煩點個贊喲,灰常感謝啦~