el-form-item校验图片

在Element UI中，`el-form-item`用于组织表单元素并添加验证功能。如果你想在表单中添加图片上传的验证，可以利用Element UI提供的`el-form-item`配合`el-upload`组件。

首先，你需要在`el-form-item`中包含一个`el-upload`组件，用来处理图片上传。例如：

<template>
  <el-form :inline="true">
    <el-form-item label="图片" prop="image">
      <el-upload
        action="/api/upload"
        :rules="[{
          required: true, // 图片是否必填
          message: '请上传图片', // 验证失败提示信息
          validator: validateImage, // 自定义验证函数
        }]"
        :before-upload="beforeUpload" // 上传前的钩子
        :on-success="handleSuccess" // 上传成功的回调
      >
        <el-button>点击上传</el-button>
        <div v-if="previewFile"> <img :src="previewFile" alt="preview"></div>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      // 在这里可以做一些预处理，比如检查文件类型、大小等
      return true; // 如果一切正常返回true
    },
    handleSuccess(response, file) {
      // 处理上传后的数据，比如将URL保存到model中
      this.previewFile = response.url;
    },
    validateImage(rule, value, callback) {
      // 这里可以根据需求自定义图片验证规则，如尺寸、格式等
      if (value.type !== 'image/jpeg' && value.type !== 'image/png') {
        callback(new Error('只支持jpg和png格式'));
      } else {
        callback();
      }
    },
  },
};
</script>

在这个例子中，我们定义了一个自定义的验证器`validateImage`，如果图片不是jpg或png格式，会给出错误提示。`beforeUpload`方法则可以在上传前进行一些额外的操作。