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

番茄西紅柿發布于2019-08-23 14:22 / 3898人閱讀

摘要：自定義校驗方法因為我的項目是分情況可以選擇是否有圖所以我定義了一個變量當他為的時候才會要求上傳走這個校驗方法里聲明這個方法圖片驗證請上傳圖片圖片驗證根據情況去切換的值就可以控制是否校驗失敗啦這就是校驗圖片的思路了是不是很簡單呢再來說說表單帶

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

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

云服務器 GPU云服務器 form表單校驗前端上傳form表單 form表單文件上傳 form表單中的action

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100513.html

【elementUI系列】使用elementUI調用一次接口同時上傳圖片和文件，同時需要攜帶其他參數

摘要：今天有一個坑，同時要上傳圖片和文件，而且圖片要展示縮略圖，文件要展示列表。我的思路是首先，只上傳附件照片，這個直接看的官方例子就行，不僅僅上傳附件照片，還同時上傳其他參數。然后，再做上傳照片和文件，上傳其他參數，其實也就是文件合并。今天有一個坑，同時要上傳圖片和文件，而且圖片要展示縮略圖，文件要展示列表。我的思路是：首先，只上傳附件照片，這個直接看ele的官方例子就行，不僅僅上傳...

lavor 2019-08-23 13:55 評論0 收藏0
圖片上傳知識點梳理

摘要：在日常項目開發中，圖片上傳是一個十分常見的場景。在圖片拖拽上傳這個業務場景中，被拖拽元素為頁面外部的圖片文件，故此處僅用到目標元素的各個事件。具體實現代碼如下至此，圖片上傳的常用知識點以梳理完畢，歡迎補充。在日常項目開發中，圖片上傳是一個十分常見的場景。而現在的各種UI框架都提供了自己的上傳組件，網上第三方的上傳組件也多如牛毛。可能你早已習慣了直接使用這些現成的組件，然而對于其具體的...

Pink 2019-08-02 11:55 評論0 收藏0
圖片上傳知識點梳理

摘要：在日常項目開發中，圖片上傳是一個十分常見的場景。在圖片拖拽上傳這個業務場景中，被拖拽元素為頁面外部的圖片文件，故此處僅用到目標元素的各個事件。具體實現代碼如下至此，圖片上傳的常用知識點以梳理完畢，歡迎補充。在日常項目開發中，圖片上傳是一個十分常見的場景。而現在的各種UI框架都提供了自己的上傳組件，網上第三方的上傳組件也多如牛毛。可能你早已習慣了直接使用這些現成的組件，然而對于其具體的...

Astrian 2019-08-23 12:49 評論0 收藏0
步步向前之Element-UI

摘要：無效方案根據交易所小時成交量占比和實時價格加權計算得到渲染結果是一個包含了文字，同時有名為的，并無小圖標，后邊中括號結構里只能有一個有待考證。 Table 固定表頭只要在el-table元素中定義了height屬性，即可實現固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實際應用大多數是需要自適應占滿父元素，超出滾動固定表頭的...

Imfan 2019-08-02 11:51 評論0 收藏0