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~~~≥ω≤