vue上传单个图片并且带删除功能

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

HTML模板代码：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <div v-if="imageUrl">
      <img :src="imageUrl" alt="uploaded image" style="max-width: 200px;">
      <button @click="deleteImage">删除图片</button>
    </div>
  </div>
</template>

Vue组件代码：

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        this.imageUrl = reader.result
      }
    },
    deleteImage() {
      this.imageUrl = ''
    }
  }
}
</script>

在该示例中，我们使用了`<input>`元素来让用户选择要上传的图片，并通过`FileReader`对象读取文件内容并将其转换为DataURL。然后，我们将DataURL赋值给`imageUrl`属性，以便在页面上显示上传的图片。最后，我们使用一个按钮来触发`deleteImage`方法，以便从页面中删除图片。