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