elementplus表单上传图片

Element Plus 是 Vue.js 的官方 UI 组件库，它提供了一个易于使用的表单组件，其中包括文件上传功能。在 Element Plus 中，你可以通过 `el-upload` 组件来实现图片上传。以下是一个简单的示例：

<template>
  <el-upload
    :action="uploadUrl"
    :on-change="handleChange"
    :file-list="fileList"
    :before-upload="beforeUpload"
    :limit="1" <!-- 单次只能上传一张 -->
    accept="image/*"
  >
    <el-button slot="trigger">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg格式，不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'your-api-url', // 你需要替换为实际的上传接口地址
      fileList: [], // 文件列表
      handleRemove(file) {
        this.fileList = this.fileList.filter(item => item !== file);
      },
      beforeUpload(file) {
        const isImage = /\.(jpe?g|png)$/.test(file.type); // 检查是否为图片
        if (!isImage) {
          alert('只能上传jpg/png/jpeg格式!');
          return false;
        }
        const size = file.size / 1024; // 判断大小是否超过500kb
        if (size > 500) {
          alert('文件不能超过500kb!');
          return false;
        }
        return true;
      },
      handleChange(file) {
        this.fileList.push(file);
      },
    };
  },
};
</script>

在这个例子中，`el-upload` 配置了动作 URL、上传触发器、文件列表管理以及文件上传前的验证。`beforeUpload` 函数用于检查文件类型和大小，`handleChange` 可以获取上传后的文件信息。