el-form-item图片必填校验

在Ant Design Vue（简称Vue-Ant-Design）中的`el-form-item`组件中，如果想要实现图片字段（通常指文件上传）的必填校验，你可以利用其内置的验证功能结合自定义验证规则。具体步骤如下：

1. 首先，在`el-form-item`标签内，为图片输入字段添加`type="file"`属性，用于指定这是一个文件上传输入。

<template>
  <el-form-item label="图片" prop="image">
    <el-upload
      :action="uploadUrl"
      :rules="[{
        required: true, // 必须填写
        message: '图片不能为空',
        type: 'string'
      }]"
      :file-list="fileList"
    >
      <i v-if="!listItem.file" class="el-icon-plus"></i>
      <img v-if="listItem.file" :src="listItem.file.url" alt="" width="100%" />
      <el-button @click="uploadFile">选取文件</el-button>
    </el-upload>
  </el-form-item>
</template>

2. 在Vue实例中，定义`uploadUrl`、`fileList`和`uploadFile`方法。`uploadUrl`应指向后端接收文件的接口地址，`fileList`用于存储已选择的文件信息。

export default {
  data() {
    return {
      uploadUrl: '/api/upload', // 服务器接口地址
      fileList: [],
      listItem: {}
    };
  },
  methods: {
    uploadFile(e) {
      const file = e.target.files;
      this.$refs['image'].$dispatch('upload', file);
    }
  },
  watch: {
    listItem(newVal, oldVal) {
      if (!newVal.file) {
        this.$refs['image'].$refs.input.clearFiles();
      }
    }
  }
}

在这里，`$dispatch`是Vue-Element-UI中Form表单组件提供的方法，用来触发自定义事件并传递数据。

3. 定义一个名为`upload`的自定义事件处理器，负责上传文件到服务器，并处理验证。在该处理器内部，你需要检查文件是否为空，若为空则返回错误信息。

注意：以上代码示例并未直接展示必填校验逻辑，实际操作中可能需要配合其他条件判断或后端服务返回的状态来确认是否满足必填要求。此外，为了更直观地显示必填提示，你可以考虑在`el-form`上设置全局的`validate-on-rule-change`属性为`true`，这样每改变一项内容都会实时验证。