element-UI 表單圖片判空驗證問題

本文地址：http://www.cnblogs.com/veinyin/p/8567167.html 

 

element-UI的表單驗證彷佛並無覆蓋到文件上傳上面，當咱們須要在表單裏驗證圖片時，就會出現問題。

當圖片爲空時，點擊保存，會出現提示。

可是當我上傳圖片後，提示並不會隨着消失，而是仍然顯示着，以下圖

 

若是須要作到正常的表單驗證，能夠在 on-change 鉤子函數里加上表單驗證，個人鉤子函數叫 upload 。

upload(file, fileList){
    this.$refs.detail.validate(valid => {
        if (valid) {
            // console.log('vue 圖片上傳鉤子函數')
        }
    })
},

　　

這樣就能夠了。

 

更新

這樣作是有 bug 的，會驗證整個表單！若是我不操做表單其餘地方，僅上傳圖片，整個表單其餘項也會蹦出來提示內容，以下圖

此問題仍待解決

 

 

 

更新2

能夠把驗證方法修改一下，改成不驗證整個表單而是部分表單，把鉤子函數的函數體改成

upload(){
    this.$refs.detail.validateField('pictureIds')
}

這樣就不會驗證整個表單了，可是隻有在狀態改變時纔會驗證，若是圖片刪去是不會去驗證的，除非是在on-remove鉤子裏再來一遍

待解決

此問題仍待解決

 

 

 

更新3

能夠把組件再封裝一下，給它一個 change 的觸發事件，這樣 trigger 填成 change 就能有用了。

this.dispatch('ElFormItem', 'el.form.change', params)

此問題就此終結

 

更新4

補充完整示例代碼，使用 vue-cli 建立 在 components 文件夾下

代碼地址 https://github.com/yinyuhui/image-validate-demo

 

MyUpload.vue

 1 <template>
 2   <div>
 3     <el-upload  4       action="https://jsonplaceholder.typicode.com/posts/"
 5       list-type="picture-card"
 6       :on-change="handleChange"
 7       :on-remove="handleRemove"
 8       :on-success="handleUpload">
 9       <i class="el-icon-plus"></i>
10     </el-upload>
11     <el-dialog :visible.sync="dialogVisible">
12       <img width="100%" :src="dialogImageUrl" alt="">
13     </el-dialog>
14   </div>
15 </template>
16 
17 <script>
18 import emitter from 'element-ui/src/mixins/emitter.js'
19   export default { 20  data() { 21       return { 22         dialogImageUrl: '', 23         dialogVisible: false
24  }; 25  }, 26  props: { 27  value: { 28         // 沒有作初始化
29         type: String || Array, 30         default: '', 31  } 32  }, 33  methods: { 34 
35  handleChange(file, fileList) { 36         this.handleImageList(fileList) 37  }, 38  handleRemove(file, fileList) { 39         this.handleImageList(fileList) 40  }, 41  handleUpload(file, fileList) { 42         this.handleImageList(fileList) 43  }, 44 
45  handleImageList(fileList) { 46         let imageList = [] 47         fileList.length > 0 && fileList.forEach(item => { 48           imageList.push(item.response && item.response.id || item.uid) 49  }) 50         this.$emit('input', imageList.join(',')) 51         this.dispatch('ElFormItem', 'el.form.change', imageList) 52  }, 53 
54       // elementUI mixins - emitter 中拷貝的
55  dispatch(componentName, eventName, params) { 56         var parent = this.$parent || this.$root; 57         var name = parent.$options.componentName; 58 
59         while (parent && (!name || name !== componentName)) { 60           parent = parent.$parent; 61 
62           if (parent) { 63             name = parent.$options.componentName; 64  } 65  } 66         if (parent) { 67  parent.$emit.apply(parent, [eventName].concat(params)); 68  } 69  }, 70  } 71  } 72 </script>

 

 form 表單文件  個人叫 HelloWorld.vue

 1 <template>
 2     <div>
 3         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
 4       <el-form-item label="圖片" prop="image">
 5         <my-upload v-model="ruleForm.image"></my-upload>
 6       </el-form-item>
 7       <el-form-item>
 8         <el-button type="primary" @click="submitForm('ruleForm')">當即建立</el-button>
 9         <el-button @click="resetForm('ruleForm')">重置</el-button>
10       </el-form-item>
11     </el-form>
12     </div>
13 </template>
14 
15 <script>
16 import MyUpload from './MyUpload'
17 export default { 18     name: 'hello-world', 19  components: { 20  MyUpload 21  }, 22 
23  data() { 24       return { 25  ruleForm: { 26           image: '', 27  }, 28  rules: { 29  image: [{ 30             required: true, 31             message: '請上傳圖片', 32             trigger: 'change'
33  }], 34  } 35  } 36  }, 37 
38  methods: { 39  submitForm(formName) { 40         this.$refs[formName].validate((valid) => { 41           if (valid) { 42             alert('submit!'); 43           } else { 44             console.log('error submit!!'); 45             return false; 46  } 47  }); 48  }, 49  resetForm(formName) { 50         this.$refs[formName].resetFields(); 51  } 52  } 53 } 54 </script>

 

 

 

END~~~≥ω≤