摘要：
iclass=“el icon plus”>；/el上传>；visible.sync=“dialogVisible”>；//t、 zoukankan.com/dialogImageUrl“alt=”“>；15<；
本文地址：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 :src="http://t.zoukankan.com/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- 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~~~≥ω≤