利用elementui写一个漂亮的带图片的添加页面

好的，我可以帮你写一个简单的demo，使用 ElementUI 中的 Upload 组件实现图片上传。

首先，在 Vue 组件中引入 ElementUI 和图片上传组件：

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

<script>
import { Upload } from 'element-ui';

export default {
  components: {
    [Upload.name]: Upload,
  },
  data() {
    return {
      imageUrl: '',
    };
  },
  methods: {
    beforeAvatarUpload(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;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
  },
};
</script>

<style scoped>
.avatar-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #d9d9d9;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #999;
}
.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

在上面的代码中，我们通过 `el-upload` 组件实现了图片上传，同时使用了 `before-upload` 和 `on-success` 事件处理函数对图片进行限制和上传成功后的处理。`imageUrl` 存储着上传成功后的图片链接，用于显示上传的图片。

你可以将上述代码放到你的 Vue 组件中，即可得到一个漂亮的带图片的添加页面。