揭秘ElementUI中el-form验证el-upload上传文件的秘密

2024-01-11 17:07:04

前言

ElementUI是一款非常流行的前端UI框架，它提供了丰富的组件库，帮助开发者快速构建出美观、易用的Web应用程序。在ElementUI中，el-form组件可以用于创建表单，el-upload组件可以用于上传文件。当我们将el-upload组件添加到el-form组件中时，就可以对上传的文件进行验证。

常规验证

ElementUI提供了多种文件验证规则，这些规则可以帮助我们确保上传的文件符合我们的要求。例如，我们可以使用size验证规则来限制上传文件的最大尺寸，可以使用type验证规则来限制上传文件的类型，还可以使用async-validator验证规则来进行自定义验证。

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="上传文件" prop="file">
    <el-upload
      :action="uploadUrl"
      :headers="headers"
      :multiple="true"
      :accept="accept"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-change="handleChange"
      :on-preview="handlePreview"
      :on-remove="handleRemove">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png格式的文件，且不超过500kb</div>
    </el-upload>
  </el-form-item>
</el-form>

export default {
  data() {
    return {
      form: {
        file: ''
      },
      uploadUrl: '',
      headers: {},
      accept: 'image/*',
      fileList: []
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      this.$message.success('文件上传成功');
    },
    handleError(err, file, fileList) {
      this.$message.error('文件上传失败');
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    handlePreview(file) {
      this.$message.info('文件预览');
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    }
  }
}

自定义验证

除了常规验证规则之外，ElementUI还允许我们进行自定义验证。我们可以通过async-validator验证规则来实现自定义验证。async-validator是一个第三方库，它提供了丰富的验证规则，可以满足我们各种各样的验证需求。

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="上传文件" prop="file">
    <el-upload
      :action="uploadUrl"
      :headers="headers"
      :multiple="true"
      :accept="accept"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-change="handleChange"
      :on-preview="handlePreview"
      :on-remove="handleRemove">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png格式的文件，且不超过500kb</div>
    </el-upload>
  </el-form-item>
</el-form>

export default {
  data() {
    return {
      form: {
        file: ''
      },
      uploadUrl: '',
      headers: {},
      accept: 'image/*',
      fileList: []
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      this.$message.success('文件上传成功');
    },
    handleError(err, file, fileList) {
      this.$message.error('文件上传失败');
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    handlePreview(file) {
      this.$message.info('文件预览');
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    validateFile(file, callback) {
      const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500kb = file.size / 1024 < 500;

      if (!isJPGOrPNG) {
        callback(new Error('只能上传jpg/png格式的文件'));
      } else if (!isLt500kb) {
        callback(new Error('文件不能超过500kb'));
      } else {
        callback();
      }
    }
  }
}