<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          element upload 上傳圖片 單獨上傳 和 添加formdata中提交的rules驗證
          
				
           2021-5-27      前端達人      
          
			
          
			
          
				
          
    lement upload上傳圖片rules的驗證分為單獨提交還是放入formdata中提交

          

          
    一個前端小菜雞。若下邊的內容有瑕希望告訴我，如果有更好的方法希望告訴我，感謝萬分。

          

          
    這篇文章主要介紹的對el-upload放在表單中提交之前rules的驗證。這里的圖片是必須提交項如果可以不提交可用常用方法直接提交就可以。

          

          
    放在formadata表達中提交

          

          <el-form ref="personform" label-position="right" label-width="120px" :model="formLabelAlign" status-icon :rules="rules"> <el-row> <el-form-item label="簡述"> <el-input type="textarea" v-model="formLabelAlign.paper" autocomplete="off"></el-input> </el-form-item> </el-row> <el-row> <el-form-item prop="file" ref="uploadpic"> <el-upload
              style="display:inline-block" :limit="2" class="upload-demo" ref="upload" action="/hqx/knowledge/importKnowledge" :before-upload="beforeAvatarUpload" :auto-upload="false" :on-change="imageChange" :on-remove="imageRemove" > <el-button slot="trigger" size="small" type="primary" plain>上傳</el-button> </el-upload> </el-form-item> </el-row> </el-form> <script> import _ from "lodash"; export default { data() { return { xiugai: false, formLabelAlign: { paper: "" }, images: [],// 圖片存儲 rules: { file: [{ required: true, message: "請上傳圖片", trigger: "change" }] }, haspic: false // 默認沒有傳圖片 }; }, methods: { beforeAvatarUpload(file) { // 文件類型進行判斷 const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type); const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error("上傳圖片只能是 image/jpeg/png 格式!"); } if (!isLt2M) { this.$message.error("上傳圖片大小不能超過 2MB!"); } return isJPG && isLt2M; }, imageChange(file, fileList, name) {//on-change觸發 this.images["file"] = fileList; this.haspic = true; // 如果上傳了就不顯示提示圖片警告 if (typeof this.images.file != "undefined") { if (this.images.file.length > 0) { this.$refs["uploadpic"].clearValidate(); } } }, imageRemove(file, fileList, name) { //on-remove觸發 //如果images為空了說明并沒有提交圖片所以需要顯示警告 if (typeof this.images.file != "undefined") { if (this.images.file.length > 0) { this.$refs["uploadpic"].clearValidate(); } else { this.$refs["uploadpic"].validate(); this.haspic = false; } } }, confirm() {// 提交綁定的事件 if (this.haspic) { // 去掉rules中對圖片的驗證 _.unset(this.rules, ["file"]); this.$refs["personform"].validate(valid => { if (valid) { console.log("說明已經添加了圖片直接提交就行了"); const wfForm = new FormData(); wfForm.append( 'dsc',this.formLabelAlign.paper) Object.entries(this.images).forEach(file => { file[1].forEach(item => { wfForm.append('files', item.raw) wfForm.append(item.name, file[0]) }) }) // 直接提交 } else { console.log("error submit!!"); return false; } }); } else { // 向rules提價一條對圖片的驗證。 _.set(this.rules, "file", { required: true, message: "請上傳圖片", trigger: "change"}); this.$refs["personform"].validate(valid => { if (valid) { console.log("說明圖片沒有提交"); } else { console.log("error submit!!"); return false; } }); } } } }; </script>  

            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 

    
          • 
        7
    
            • 

    
          • 
        8
    
            • 

    
          • 
        9
    
            • 

    
          • 
        10
    
            • 

    
          • 
        11
    
            • 

    
          • 
        12
    
            • 

    
          • 
        13
    
            • 

    
          • 
        14
    
            • 

    
          • 
        15
    
            • 

    
          • 
        16
    
            • 

    
          • 
        17
    
            • 

    
          • 
        18
    
            • 

    
          • 
        19
    
            • 

    
          • 
        20
    
            • 

    
          • 
        21
    
            • 

    
          • 
        22
    
            • 

    
          • 
        23
    
            • 

    
          • 
        24
    
            • 

    
          • 
        25
    
            • 

    
          • 
        26
    
            • 

    
          • 
        27
    
            • 

    
          • 
        28
    
            • 

    
          • 
        29
    
            • 

    
          • 
        30
    
            • 

    
          • 
        31
    
            • 

    
          • 
        32
    
            • 

    
          • 
        33
    
            • 

    
          • 
        34
    
            • 

    
          • 
        35
    
            • 

    
          • 
        36
    
            • 

    
          • 
        37
    
            • 

    
          • 
        38
    
            • 

    
          • 
        39
    
            • 

    
          • 
        40
    
            • 

    
          • 
        41
    
            • 

    
          • 
        42
    
            • 

    
          • 
        43
    
            • 

    
          • 
        44
    
            • 

    
          • 
        45
    
            • 

    
          • 
        46
    
            • 

    
          • 
        47
    
            • 

    
          • 
        48
    
            • 

    
          • 
        49
    
            • 

    
          • 
        50
    
            • 

    
          • 
        51
    
            • 

    
          • 
        52
    
            • 

    
          • 
        53
    
            • 

    
          • 
        54
    
            • 

    
          • 
        55
    
            • 

    
          • 
        56
    
            • 

    
          • 
        57
    
            • 

    
          • 
        58
    
            • 

    
          • 
        59
    
            • 

    
          • 
        60
    
            • 

    
          • 
        61
    
            • 

    
          • 
        62
    
            • 

    
          • 
        63
    
            • 

    
          • 
        64
    
            • 

    
          • 
        65
    
            • 

    
          • 
        66
    
            • 

    
          • 
        67
    
            • 

    
          • 
        68
    
            • 

    
          • 
        69
    
            • 

    
          • 
        70
    
            • 

    
          • 
        71
    
            • 

    
          • 
        72
    
            • 

    
          • 
        73
    
            • 

    
          • 
        74
    
            • 

    
          • 
        75
    
            • 

    
          • 
        76
    
            • 

    
          • 
        77
    
            • 

    
          • 
        78
    
            • 

    
          • 
        79
    
            • 

    
          • 
        80
    
            • 

    
          • 
        81
    
            • 

    
          • 
        82
    
            • 

    
          • 
        83
    
            • 

    
          • 
        84
    
            • 

    
          • 
        85
    
            • 

    
          • 
        86
    
            • 

    
          • 
        87
    
            • 

    
          • 
        88
    
            • 

    
          • 
        89
    
            • 

    
          • 
        90
    
            • 

    
          • 
        91
    
            • 

    
          • 
        92
    
            • 

    
          • 
        93
    
            • 

    
          • 
        94
    
            • 

    
          • 
        95
    
            • 

    
          • 
        96
    
            • 

    
          • 
        97
    
            • 

    
          • 
        98
    
            • 

    
          • 
        99
    
            • 

    
          • 
        100
    
            • 

    
          • 
        101
    
            • 

    
          • 
        102
    
            • 

    
          • 
        103
    
            • 

    
          • 
        104
    
            • 

    
          • 
        105
    
            • 

    
          • 
        106
    
            • 

    
          • 
        107
    
            • 

    
          • 
        108
    
            • 

    
          • 
        109
    
            • 

    
          • 
        110
    
            • 

    
          • 
        111
    
            • 


          

          

          
    下邊解釋一下每段代碼的含義：
          
1.

          

          imageChange(file, fileList, name) {//on-change觸發 this.images["file"] = fileList; this.haspic = true; // 如果上傳了就不顯示提示圖片警告 if (typeof this.images.file != "undefined") { if (this.images.file.length > 0) { this.$refs["uploadpic"].clearValidate(); } } }  

            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 

    
          • 
        7
    
            • 

    
          • 
        8
    
            • 

    
          • 
        9
    
            • 

    
          • 
        10
    
            • 


          

          

          
    if (typeof this.images.file != “undefined”) 這個可加可不加
          
其中的一個原因是因為要頻繁對rules進行操作因為element的el-upload的提示功能在選擇了圖片的時候并不會對圖片的提示進行更改所以只能自己進行操作更改他顯示或者隱藏
          
haspic是用來記錄他是否上傳了圖片 如果上傳為true否則為false 在后面提交的時候有用。
          
2.考慮到用戶可能會選擇了圖片又刪除了所以加上了一個判斷
          
如果在提交的時候進行驗證或者不考慮用戶全部刪除顯示提示可不加 

          

          imageRemove(file, fileList, name) { //on-remove觸發 //如果images為空了說明并沒有提交圖片所以需要顯示警告 if (typeof this.images.file != "undefined") { if (this.images.file.length > 0) { this.$refs["uploadpic"].clearValidate(); } else { this.$refs["uploadpic"].validate(); this.haspic = false; } } },  

            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 

    
          • 
        7
    
            • 

    
          • 
        8
    
            • 

    
          • 
        9
    
            • 

    
          • 
        10
    
            • 

    
          • 
        11
    
            • 


          

          

            
    
          1. 
    
            2. 

          

          confirm() {// 提交綁定的事件 if (this.haspic) { // 去掉rules中對圖片的驗證 _.unset(this.rules, ["file"]); this.$refs["personform"].validate(valid => { if (valid) { console.log("說明已經添加了圖片直接提交就行了"); const wfForm = new FormData(); wfForm.append( 'dsc',this.formLabelAlign.paper) Object.entries(this.images).forEach(file => { file[1].forEach(item => { wfForm.append('files', item.raw) wfForm.append(item.name, file[0]) }) }) // 直接提交 } else { console.log("error submit!!"); return false; } }); } else { // 向rules提價一條對圖片的驗證。 _.set(this.rules, "file", { required: true, message: "請上傳圖片", trigger: "change"}); this.$refs["personform"].validate(valid => { if (valid) { console.log("說明圖片沒有提交"); } else { console.log("error submit!!"); return false; } }); } } } };  

            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 

    
          • 
        7
    
            • 

    
          • 
        8
    
            • 

    
          • 
        9
    
            • 

    
          • 
        10
    
            • 

    
          • 
        11
    
            • 

    
          • 
        12
    
            • 

    
          • 
        13
    
            • 

    
          • 
        14
    
            • 

    
          • 
        15
    
            • 

    
          • 
        16
    
            • 

    
          • 
        17
    
            • 

    
          • 
        18
    
            • 

    
          • 
        19
    
            • 

    
          • 
        20
    
            • 

    
          • 
        21
    
            • 

    
          • 
        22
    
            • 

    
          • 
        23
    
            • 

    
          • 
        24
    
            • 

    
          • 
        25
    
            • 

    
          • 
        26
    
            • 

    
          • 
        27
    
            • 

    
          • 
        28
    
            • 

    
          • 
        29
    
            • 

    
          • 
        30
    
            • 

    
          • 
        31
    
            • 

    
          • 
        32
    
            • 

    
          • 
        33
    
            • 

    
          • 
        34
    
            • 

    
          • 
        35
    
            • 

    
          • 
        36
    
            • 


          

          

          
    提交的時候進行判斷。因為沒有想到其他的方法所以寫了一個變量判斷是否在rules加上對圖片的判斷。因為如果存在對圖片的判斷。form驗證的時候就總是throw error 不能進行提交操作this.$refs[“personform”].validate(valid）{}是提交form表單的時的驗證
          
（1）在有圖片的時候去掉對圖片的驗證
          
（2）在有圖片的時候加上對圖片的驗證

          

          
    不放在formdata中提交（相對于上一個這個簡單多了）

          

          <template> <div> <el-form ref="personform" label-position="right" label-width="120px" :model="formLabelAlign" status-icon :rules="rules"> <el-row> <el-col :span="12"> <el-form-item label="發布人"> <el-input
                size="mini" v-model="formLabelAlign.person" autocomplete="off" clearable :disabled="xiugai" ></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-form-item label="簡述"> <el-input type="textarea" v-model="formLabelAlign.paper" autocomplete="off"></el-input> </el-form-item> </el-row> <el-row> <el-form-item prop="file" ref="uploadpic"> <el-upload  

          
     style="display:inline-block" :limit="2" class="upload-demo" ref="upload" action="/hqx/knowledge/importKnowledge" :before-upload="beforeAvatarUpload" :auto-upload="false" :on-change="imageChange" :on-remove="imageRemove" :on-success="onsuccess" > <el-button slot="trigger" size="small" type="primary" plain>上傳</el-button> </el-upload> </el-form-item> </el-row> </el-form> </div> </template> <script> import _ from "lodash"; export default { data() { return { xiugai: false, formLabelAlign: { paper: "" }, images: [], rules: { file: [{ required: true, message: "請上傳圖片", trigger: "change" }] }, haspic: false // 默認沒有傳圖片 }; }, methods: { beforeAvatarUpload(file) { // 文件類型進行判斷 const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type); const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error("上傳圖片只能是 image/jpeg/png 格式!"); } if (!isLt2M) { this.$message.error("上傳圖片大小不能超過 2MB!"); } return isJPG && isLt2M; }, imageChange(file, fileList, name) { this.images["file"] = fileList; this.haspic = true; // 如果上傳了就不顯示提示 if (typeof this.images.file != "undefined") { if (this.images.file.length > 0) { this.$refs["uploadpic"].clearValidate(); } } }, imageRemove(file, fileList, name) { if (typeof this.images.file != "undefined") { if (this.images.file.length > 0) { this.$refs["uploadpic"].clearValidate(); } else { this.$refs["uploadpic"].validate(); this.haspic = false; } } }, onsuccess(response, file, fileList){ //  如果提交失敗將haspic改為false后邊的數據就不讓他提交 }, confirm() { if (this.haspic) { // 去掉rules中對圖片的驗證 _.unset(this.rules, ["file"]); this.$refs["personform"].validate(valid => { if (valid) { console.log("說明已經添加了圖片直接提交就行了"); const wfForm = new FormData(); wfForm.append( 'dsc',this.formLabelAlign.paper) //直接將wfForm提交就可以 } else { console.log("error submit!!"); return false; } }); } else { alert('請添加圖片之后在提交') } } } }; </script> 

          


          
      

          


          
      

          


          
      

          


          
      

          


          
     

          


          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。 

          


          
    截屏2021-05-13 上午11.41.03.png  

          


          
      

          


          
     

          


          
    文章來源：csdn    

          


          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者. 

          
 

          
    免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

          
           

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務 

          
           

          
    
          


          

          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合