elementui上传一张图片的组件

Element UI 提供了一个 `el-upload` 组件，可以用于上传图片。

以下是一个简单的示例：

<template>
  <el-upload
    class="avatar-uploader"
    action="/upload"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
    };
  },
  methods: {
    handleSuccess(response, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return false;
      }
      return true;
    },
  },
};
</script>

这个示例中，我们使用 `el-upload` 组件来上传图片。它有几个关键属性：

- `action`：上传图片的地址。
- `show-file-list`：是否显示已上传的文件列表。
- `on-success`：上传成功的回调函数。
- `before-upload`：上传前的回调函数。

在这个示例中，我们使用 `handleSuccess` 函数来处理上传成功后的结果。在该函数中，我们使用 `URL.createObjectURL()` 来生成一个临时的 URL，用于显示上传的图片。

在 `beforeUpload` 函数中，我们可以进行一些上传前的检查，例如文件类型、大小等。如果检查不通过，可以通过返回 `false` 来阻止上传。