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();取值上傳的,要注意 ,取消其序列號,我在公共的上傳方法裏封裝好了,所以這裏就直接調用啦~

---

小可愛們,如果覺得學到了一點點,麻煩點個贊喲,灰常感謝啦~