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

orange發表於2019-02-16
UIORM

自定義校驗方法,因為我的專案是,分情況,可以選擇是否有圖,所以我定義了一個變數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();取值上傳的,要注意 ,取消其序列號,我在公共的上傳方法裡封裝好了,所以這裡就直接呼叫啦~

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

相關文章