vue el-upload组件上传单个图片并且带删除和放大

好的，针对您的问题，我可以提供以下代码示例，用于实现Vue的Element UI Upload组件上传单个图片并带删除和放大功能：

HTML模板代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/your-upload-api"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :on-error="onError"
      :show-file-list="false"
    >
      <div v-if="!imageUrl" class="upload-plus">
        <i class="el-icon-plus"></i>
        <div class="upload-text">上传图片</div>
      </div>
      <div v-else class="upload-success">
        <img :src="imageUrl" alt="uploaded image">
        <div class="upload-actions">
          <span class="upload-delete" @click="deleteImage">删除图片</span>
          <span class="upload-enlarge" @click="enlargeImage">放大图片</span>
        </div>
      </div>
    </el-upload>
  </div>
</template>

Vue组件代码：

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式！')
        return false
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB！')
        return false
      }
    },
    onSuccess(response) {
      this.imageUrl = response.data.url
    },
    onError(error) {
      this.$message.error('上传图片失败！')
    },
    deleteImage() {
      this.imageUrl = ''
    },
    enlargeImage() {
      this.$alert(`<img src="${this.imageUrl}" style="max-width: 100%;">`, '放大图片', {
        dangerouslyUseHTMLString: true
      })
    }
  }
}
</script>

在该示例中，我们使用了Vue的Element UI Upload组件来实现图片上传功能。我们通过`before-upload`钩子函数来限制上传图片的格式和大小。在上传成功时，我们将返回的图片URL赋值给`imageUrl`属性，以便在页面上显示上传的图片。我们还使用了一个删除按钮和一个放大按钮，分别用于删除和放大图片。当用户点击放大按钮时，我们使用`$alert`方法来展示放大后的图片。