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

 <template>
   <div>
     <el-upload
       action="https://jsonplaceholder.typicode.com/posts/"
       list-type="picture-card"
       :on-change="handleChange"
       :on-remove="handleRemove"
       :on-success="handleUpload">
       <i class="el-icon-plus"></i>
     </el-upload>
     <el-dialog :visible.sync="dialogVisible">
       <img width="100%" :src="dialogImageUrl" alt="">
     </el-dialog>
   </div>
 </template>

 <script>
 import emitter from 'element-ui/src/mixins/emitter.js'
   export default {
     data() {
       return {
         dialogImageUrl: '',
         dialogVisible: false
       };
     },
     props: {
       value: {
         // 没有做初始化
         type: String || Array,
         default: '',
       }
     },
     methods: {

       handleChange(file, fileList) {
         this.handleImageList(fileList)
       },
       handleRemove(file, fileList) {
         this.handleImageList(fileList)
       },
       handleUpload(file, fileList) {
         this.handleImageList(fileList)
       },

       handleImageList(fileList) {
         let imageList = []
         fileList.length > 0 && fileList.forEach(item => {
           imageList.push(item.response && item.response.id || item.uid)
         })
         this.$emit('input', imageList.join(','))
         this.dispatch('ElFormItem', 'el.form.change', imageList)
       },

       // elementUI mixins - emitter 中拷贝的
       dispatch(componentName, eventName, params) {
         var parent = this.$parent || this.$root;
         var name = parent.$options.componentName;

         while (parent && (!name || name !== componentName)) {
           parent = parent.$parent;

           if (parent) {
             name = parent.$options.componentName;
           }
         }
         if (parent) {
           parent.$emit.apply(parent, [eventName].concat(params));
         }
       },
     }
   }
 </script>

 form 表单文件  我的叫 HelloWorld.vue

 <template>
     <div>
         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
       <el-form-item label="图片" prop="image">
         <my-upload v-model="ruleForm.image"></my-upload>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
         <el-button @click="resetForm('ruleForm')">重置</el-button>
       </el-form-item>
     </el-form>
     </div>
 </template>

 <script>
 import MyUpload from './MyUpload'
 export default {
     name: 'hello-world',
     components: {
       MyUpload
     },

     data() {
       return {
         ruleForm: {
           image: '',
         },
         rules: {
           image: [{
             required: true,
             message: '请上传图片',
             trigger: 'change'
           }],
         }
       }
     },

     methods: {
       submitForm(formName) {
         this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
             console.log('error submit!!');
             return false;
           }
         });
       },
       resetForm(formName) {
         this.$refs[formName].resetFields();
       }
     }
 }
 </script>

END~~~≥ω≤