element ui 图片上传监听

在 Element UI 中，你可以使用 `el-upload` 组件来实现图片上传，并通过监听相关事件来获取上传状态和上传成功后的图片地址。

首先，在 HTML 中使用 `el-upload` 组件，设置相应的属性和事件监听：

<el-upload
  class="upload-demo"
  action="/your-upload-url"
  :on-success="handleSuccess"
  :before-upload="beforeUpload"
  :auto-upload="false"
>
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
</el-upload>

在以上示例中，`action` 属性指定了上传文件的接口地址，`on-success` 属性绑定了上传成功后的回调方法 `handleSuccess`，`before-upload` 属性绑定了上传前的回调方法 `beforeUpload`，`auto-upload` 属性设置为 `false` 表示不自动上传。

然后，在 Vue 实例中定义这两个回调方法：

methods: {
  handleSuccess(response, file, fileList) {
    // 上传成功后的回调函数
    console.log('上传成功');
    console.log(response); // 服务器返回的数据
    console.log(file); // 上传的文件对象
    console.log(fileList); // 文件列表数组
  },
  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;
    }

    r