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