Element Plus 按钮实现上传图片功能

Element Plus 提供了一个非常方便的上传组件 `ElUpload`，你可以使用它来上传图片。下面是一个简单的示例：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="//jsonplaceholder.typicode.com/posts/"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :show-file-list="false"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 < 500;

      if (!isJpgOrPng) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }

      if (!isLt500K) {
        this.$message.error('上传图片大小不能超过 500KB!');
      }

      return isJpgOrPng && isLt500K;
    },
    handleSuccess(response, file) {
      console.log(response, file);
      // 在这里处理上传成功后的操作
    },
  },
};
</script>

上面的代码中，我们使用了 `ElUpload` 组件来实现图片上传功能。需要注意的是，我们在 `beforeUpload` 方法中对上传的文件进行了类型和大小的限制，只允许上传 jpg/png 格式的图片，且大小不能超过 500KB。如果上传的文件不符合要求，我们会在界面上显示错误信息。另外，在 `handleSuccess` 方法中，我们可以处理上传成功后的操作。