elementPlus 表单效验上传图片

Element Plus 是 Vue 3 的 UI 框架，它构建于 Element UI 之上，提供了更现代、简洁的设计风格。在 Element Plus 中，表单验证功能非常强大，对于文件上传，特别是图片上传，你可以利用其提供的 `el-upload` 组件及其相关的 prop 和事件来进行处理。

首先，你需要在模板上引入 `el-upload` 组件，并设置一些基本属性：

<template>
  <el-form-item label="上传图片">
    <el-upload
      :action="uploadUrl"
      :file-list="fileList"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :limit="1" <!-- 可选，限制同时上传的数量 -->
      :auto-upload="true" <!-- 是否自动上传，默认 true -->
    >
      <el-button size="small">点击上传</el-button>
      <div v-if="fileList.length">已选择{{ fileList.length }}张</div>
    </el-upload>
  </el-form-item>
</template>

然后，在组件的 script 部分配置相关的数据和方法：

<script>
export default {
  data() {
    return {
      uploadUrl: '你的服务器上传地址', // 用于发送文件的 URL
      fileList: [], // 上传图片的列表
    };
  },
  methods: {
    handleChange(file) {
      this.fileList.push(file);
    },
    beforeUpload(file) {
      // 这里可以添加额外的验证，如图片大小、格式等
      if (file.size > 1024 * 1024) { // 如果超过1MB
        alert('图片过大');
        return false;
      }
      return true; // 返回true表示可以上传，false则阻止上传
    },
    handleSuccess(response, file) {
      console.log('上传成功', response, file);
      // 这里可以根据服务器返回的数据做进一步处理
    },
    handleError(error, file) {
      console.error('上传失败', error, file);
      // 错误处理逻辑
    },
  },
};
</script>

在这个例子中，`before-upload` 方法会在上传前触发，允许你在上传之前进行自定义验证。`handleSuccess` 和 `handleError` 分别在上传成功和失败时执行回调。