用vue写一个图片上传按钮，上传图片回显并可以删除

好的，下面是一个简单的示例，可以帮助您实现Vue.js的图片上传和删除功能。

首先，您需要在Vue.js中使用`v-model`指令来绑定一个`file`类型的input元素，以便用户可以选择要上传的图片。然后，您可以使用`FormData`对象将所选的图片文件上传到服务器上。

接下来，您可以根据服务器返回的响应，在Vue中维护一个图片地址数组，并使用`v-for`指令循环遍历这些地址，以在页面上展示所有上传的图片。

最后，您可以使用`v-on`指令来绑定删除按钮的`click`事件，并在删除按钮被点击时，向服务器发送删除请求，同时在Vue中从图片地址数组中删除对应的地址，以删除相应的图片。

下面是示例代码：

<template>
  <div>
    <input type="file" v-model="selectedFile" @change="onFileSelected">
    <button @click="uploadFile">上传</button>
    <div v-for="(imageUrl, index) in imageUrls" :key="index">
      <img :src="imageUrl" width="100">
      <button @click="deleteImage(index)">删除</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
      imageUrls: [],
    };
  },
  methods: {
    onFileSelected(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadFile() {
      const formData = new FormData();
      formData.append("file", this.selectedFile);
      axios.post("/upload", formData).then((response) => {
        this.imageUrls.push(response.data.imageUrl);
      });
    },
    deleteImage(index) {
      const imageUrl = this.imageUrls[index];
      axios.post("/delete", { imageUrl }).then(() => {
        this.imageUrls.splice(index, 1);
      });
    },
  },
};
</script>

在上面的代码中，我们使用了`axios`库来发送HTTP请求。您需要根据自己的实际情况来选择合适的HTTP库。此外，您还需要将`/upload`和`/delete`替换为实际的上传和删除URL。

希望这个示例能帮助到您！